簡介

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引數說明

optionBoxEmpty引數說明

changeSelected引數說明

如果使用中有什麼問題，可以聯絡我，或者有什麼建議都可以提出。