支援中文/全拼/簡拼以及自定義篩選的下拉列表
簡介
fxss-autoSelectSearch是一款jquery外掛,支援中文/全拼/簡拼等多種搜尋方式的搜尋外掛,還支援清空搜尋列表、強制指定某個搜尋框選擇某項option。
使用
首先必須引入jQuery檔案、fxss-autoSelectSearch.js核心檔案 以及 fxss-autoSelectSearch.css樣式檔案。
<link rel="stylesheet" href="http://www.fxss5201.cn/project/plugin/autoSelectSearch/fxss-autoSelectSearch.css">
<script src="http://www.fxss5201.cn/project/js/jquery-1.11.3.js"></script>
<script src="http://www.fxss5201.cn/project/plugin/autoSelectSearch/fxss-autoSelectSearch.min.js"></script>
在html中需要有如下格式:
<div class="autoSelectSearch-box js-autoSelectSearch-box">
<input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test1" autocomplete="off">
<ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
<i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
</div>
- 外層的div是包裹整個外掛的DOM
- input框就是輸入搜尋的地方,input設定autocomplete為off,自定義屬性data-optionChoiced可以設定當前選中項,當然你也可以直接為其設定value來表示選中項並且當value設定的時候,data-optionChoiced設定無效且會被更新,
- ul則是符合條件的下拉列表
- i標籤是右邊的表示下拉的圖示(可以設定isNeedCaret是否需要顯示)。
如果你覺得樣式不合你的口味,可以直接修改fxss-autoSelectSearch.css的樣式檔案。
在js檔案中可以按照如下寫法:
$("#test1").autoSelectSearch({
dataList: data,
isNeedCaret: true,
key: "userName",
isNeedSpell: true,
props: {
label: "Cellphone",
text: "userName",
spell: "spell",
simpleSpell: "simpleSpell"
},
choicedType: "Cellphone",
optionClickFun: function (obj) {
console.log(obj)
}
});
上面是整個外掛的引用,點選下拉列表中的選項之後回撥optionClickFun函式會以引數將當前選中項的資料傳出。
清空搜尋列表用法如下:
$("#test1").optionBoxEmpty();
強制指定某個搜尋框選擇某項option:
$("#test1").changeSelected({
choiced: "11122223333"
});
autoSelectSearch引數說明
引數 | 型別 | 預設值 | 描述 |
---|---|---|---|
dataList | array | []空陣列 | 下拉列表的總資料 |
key | string | null | filter過濾依據,為props中的一個屬性值 |
focusIn | string | null | input框獲取焦點的時候新增的class類名 |
focusOut | string | null | input框失去焦點的時候新增的class類名 |
isNeedCaret | boolen | false | 是否需要下拉圖示 |
isNeedSpell | boolen | false | 是否需要拼音檢索,true需要,flase不需要,如果開啟拼音搜尋則需要在dataList中指定拼音 |
spellKey | string | “spell” | 拼音全拼filter過濾依據,請在props中以spell為key指定值,預設值為spell |
simpleSpellKey | string | “simpleSpell” | 拼音簡拼filter過濾依據,請在props中以simpleSpellKey為key指定值,預設值為simpleSpellKey |
props | object | { label: “attr”,text: “name” } | 渲染下拉列表的依據,最多可以指定四個key值,label、text、spell、simpleSpell,所有指定的值都會以自定義屬性渲染到相應的option即li上面,option的內容是以text渲染的 |
isSetSelectionRange | boolen | true | 是否需要在input選中的時候,直接選中value值,預設為選中(true),如不想選中,可設定為false |
isOptionChoiced | boolen | true | 是否需要設定舊的選項值,如果需要(true),則需要設定data-optionchoiced自定義屬性,將會把選中值設定到此自定義屬性,並且當將input刪除為空的時候,input失去焦點的時候,也會將此自定義屬性的值設定為value |
choicedType | string | null | 選中值的引數型別 |
optionChoicedClass | string | “js-option-choiced” | selectSearchOption選中時的樣式類名,預設為”js-option-choiced” |
isOpenRemove | boolen | false | 是否開啟去重處理,預設false不開啟,true開啟則必須設定去重處理的class類名,去重處理主要是按照props裡面的text來去重 |
removeBoxClass | string | 去重處理的容器的class類名(如”.class”)或id名(如”#id”),預設值為空 | |
removeClass | string | “js-autoSelectSearch-remove” | 去重處理的class類名,預設值為”js-autoSelectSearch-remove” |
isEnter | boolen | false | 是否開啟在input中的回車事件,點選回車預設選中第一個 |
isEnterCongruent | boolen | false | 開啟在input中的回車事件,回車的時候內容是否要和列表中的內容匹配(此處指的匹配僅僅是將第一個option的值與dataList相對label、text、spell、simpleSpell對應的值的值進行比較),true匹配,false匹不匹配都可以 |
optionClickFun | function | null | 為selectSearchOption上繫結函式 |
optionBoxEmpty引數說明
引數 | 型別 | 預設值 | 描述 |
---|---|---|---|
offEvent | boolean | false | 是否要清除input繫結的事件,清除之後提示搜尋功能將不再支援,預設值是false,僅做置空處理 |
changeSelected引數說明
引數 | 型別 | 預設值 | 描述 |
---|---|---|---|
choiced | string | null | 指定選中項的值,請以物件的形式指定{ choiced: “” },請確保如果指定了choicedType值,在指定值得時候請指定相應的內容 |
如果使用中有什麼問題,可以聯絡我,或者有什麼建議都可以提出。
相關推薦
自定義Spinner(下拉列表)五步走
在Android的UI開發中,Spinner(下拉列表)總是可以用到的,一個簡單的自定義Spinner製作我們只需要記住這重要的五步,一個Spinner就可以應用而生了。 (1)新建一個Android工程,名字為SpinnerTest1。修改layout下的main.xml
支援中文/全拼/簡拼以及自定義篩選的下拉列表
簡介 fxss-autoSelectSearch是一款jquery外掛,支援中文/全拼/簡拼等多種搜尋方式的搜尋外掛,還支援清空搜尋列表、強制指定某個搜尋框選擇某項option。 使用 首先必須引入jQuery檔案、fxss-autoSelectS
react native自定義實現下拉重新整理上拉載入
1·定義元件 PageListView.js /** * 上拉重新整理/下拉載入更多 元件 */ import React, { Component } from 'react'; import { Text, View, ListView, FlatList
Android自定義ScrollView下拉圖片變大且帶有一鍵置頂功能
描述:下拉ScrollView時頂部的圖片隨之變大,回拉縮小,且帶有一鍵置頂的功能 1.自定義類: import android.animation.ObjectAnimator; import android.animation.ValueAnimator; imp
Android編寫一個登入介面,利用資料庫實現記住密碼,註冊賬號,強制下線,以及類似QQ的下拉列表登入功能
首先呢,看到這麼長的標題,是不是感覺這些功能有點難以實現呢,哈哈,其實並沒有想象中的那麼複雜,下面就跟著筆者來一起學習一下這些功能是怎麼實現的吧! 1.建立一個所有活動的父類,繼承自A
微信小程式之自定義select下拉選項框元件
知識點:元件,animation,獲取當前點選元素的索引與內容 微信小程式中沒有select下拉選項框,所以只有自定義。自定義的話,可以選擇模板的方式,也可以選擇元件的方式來建立。 這次我選擇了元件,這樣只需引入元件和新增資料,其它的不用管,就能實現多個地方重複使用了。
自定義select下拉框樣式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x
自定義ListView下拉重新整理上拉載入更多功能
本篇的自定義listview包含下拉重新整理和上拉載入更多都是自定義。如果你想把重新整理的圖片做的更炫只需要更換下圖片加上適當的動畫就OK咯!由於沒有合適的圖片就用了個粗糙的。不好看請見諒。 //部分程式碼(都做了註釋): /** * @author: ZQF_
VUE2 配合mint-ui實現 自定義 loadmore(下拉重新整理,上拉更多)
<template> <div class="page-loadmore"> <h1 class="page-title">Pull up</h1> <p class="page-loadmore-de
MFC 自繪listbox , 自繪ComboBox 下拉列表框 如何設定其列表項的高度和寬度?
自繪ListBox 設定其列表項的高度和寬度可以通過過載虛擬函式 MeasureItem (LPMEASUREITEMSTRUCT lpMeasureItemStruct) 來實現: void CMyComboBox::MeasureItem(LPMEASUREITEMST
完全自定義RecyclerView下拉重新整理上拉載入
自從谷歌推出SwipeRefreshLayout之後越來越多的部落格都是使用SwipeRefreshLayout來完成下拉重新整理,但是往往產品經理根本不會使用谷歌的樣式.每個公司都有一套自己的下拉樣式這個時候就需要我們完全自定義RecyclerView的下拉重新整理,基本
自定義動畫下拉重新整理,可仿美團、京東
效果 功能 支援ListView,RecycleView,ScrollView,WebView 一行程式碼指定是否支援上拉載入,下拉重新整理 自由定製重新整理時頭部和尾部的動畫效果 使用方式 首先,是引入庫 compile 'com.reoo
簡單的自定義select 下拉框,相容IE
IE瀏覽器下 的select 實在是各種…… 不好看……,可是專案要求至少相容IE11 , 為了長得好看些,只能手動去編輯一個類似 select 的存在了, 測試過IE9 以上,有不對的歡迎指出 備忘,直接上程式碼: <!DOCTYPE htm
Android自定義Spinner下拉框,可以設定提示文字
近期公司專案中需要用到下拉框,為了省事於是就用了自帶的Spinner,但使用後發現一個問題,就是不能設定提示文字。。並且,在父類是FragmentActivity的時候,還會有不一樣的顯示,總之使用起來非常的不爽。。於是就決定自己動手封裝一個Spinner來實現自己的效果,
自定義ExpandableListView下拉重新整理功能簡單實現(這裡主要說自定義可下拉的功能)
ExpandableListView 筆記 ExpandableListVivew 是 ListView 的子類,它在普通 ListView 的基礎上進行了擴充套件, 它把應用中的列表項分為幾組,每組裡又可包含多個列表項。 ExpandableListViv
自定義ScrollView--下拉重新整理上滑底部自動載入更多
本文介紹給大家自己寫的一個方便的下拉重新整理上滑載入的自定義ScrollView;直接上乾貨(詳解在程式碼註釋中給出):public class RefreshScrollView extends ScrollView{ /** * 重寫建構函式,這裡不是重
微信小程式-自定義固定下拉框
開發十年,就只剩下這套架構體系了! >>>
【Apache Solr系列】使用IKAnalyzer中文分詞以及自定義分詞字典
之前寫的Apache Solr只介紹了簡單的搭建以及匯入資料等功能,最近由於專案要求,新增索引分詞和搜尋分詞功能;分詞的專案有包括好幾個:smartcn、ictclas4j、IK、jeasy、庖丁、mmseg4j; 以上幾種分詞器各有優缺點,根據不同場景可分可定製和不可定
IntelliJ IDEA程式碼提示快捷鍵以及自定義程式碼補全設定
一、快捷鍵風格 通過設定Keymap把快捷鍵風格設定成Eclipse風格。 File –> Settings –> Keymap –> 下拉選單選擇Eclipse –> OK 二、程式碼自動提示快捷鍵 IntelliJ IDE
Zabbix的通知功能以及自定義腳本告警
edi web管理 har idt cti 遠程 rip 9.png ble 本節內容: Zabbix的通知功能 定義接收告警的用戶 定義Action Zabbix自定義腳本發送報警郵件 一、Zabbix的通知功能 在配置好監控項和觸發器之後,一旦正常工作中的某觸發