fxss-autoSelectSearch是一款jquery

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参数说明

如果使用中有什么问题，可以联系我，或者有什么建议都可以提出。