支持中文/全拼/简拼以及自定义筛选的下拉列表插件

在某些项目中使用下拉列表的时候，产品经理可能希望下拉列表可以支持文中/全拼/简拼的多种搜索功能，但是国外的插件都不支持的（他们只有字母呀，支持中文搜索=》字与字核对），而国内很多框架也仅实现了中文搜索的功能，却并不支持拼音搜索，所以不太符合项目要求，为此所以有了本文的这个插件。

使用说明

首先必须引入jQuery文件、autoSelectSearch.js核心文件 以及 autoSelectSearch.css样式文件

在html中需要有如下格式：

<p class="autoSelectSearch-box js-autoSelectSearch-box">
     <input class="input js-autoSelectSearch-input" type="text" data-optionChoiced="18039678963">
     <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
</p>

外层的p是包裹整个插件的DOM，input就是输入搜索的地方，ul则是符合条件的下拉列表

在js文件中可以按照如下写法：

autoSelectSearch({
    element: ".js-autoSelectSearch-input",
    dataList: data,
    key: "FoowwUserName",
    isNeedSpell: true,
    props: {
        label: "Cellphone",
        text: "FoowwUserName",
        spell: "spell",
        simpleSpell: "simpleSpell"
    },
    isOptionChoiced: true,
    choicedType: "Cellphone",
    isOpenRemove: false,
    isEnter: true,
    optionClickFun: function (obj) {
        console.log(obj)
        console.log(obj.targetInput.attr("class"))
    }         
});

上面是整个插件的引用，点击下拉列表中的选项之后回调optionClickFun函数会以参数将当前选中项的数据传出。

另外还有一个render渲染参数，用法如下：

$("#clickRender").on("click", function () {
    autoSelectSearch.render($(".js-autoSelectSearch-input").eq(0), "11122223333");
});

参数说明

参数	类型	描述
element	object	需要实现下拉列表的input标签，如果仅有一个可为”.element”或者”#element”，如果为多个则为”.element”
dataList	array	下拉列表的总数据
key	string	filter过滤依据
isNeedSpell	boolen	是否需要拼音检索，true需要，flase不需要，默认是false
spellKey	string	拼音全拼filter过滤依据，默认为”spell”
simpleSpellKey	string	拼音简拼filter过滤依据，默认为”simpleSpell”
props	object	渲染下拉列表的依据，默认为{ label: “attr”,text: “name” }
isSetSelectionRange	boolen	是否需要在input选中的时候，直接选中value值，默认为选中（true），如不想选中，可设置为false
isOptionChoiced	boolen	是否需要设定旧的选项值，如果需要（true），则需要在input标签上面设置自定义属性data-optionChoiced
choicedType	string	选中值的参数类型
optionChoicedClass	string	selectSearchOption选中时的样式参数名称（isOptionChoiced必须为true），如果isOptionChoiced为false，则指定optionChoicedClass无效，默认为”js-option-choiced”
isOpenRemove	boolen	是否开启去重处理，默认false不开启,true开启则必须设置去重处理的class类名，去重处理主要是按照props里面的text来去重
removeClass	string	去重处理的class类名，默认值为”js-autoSelectSearch-removeClass”
isEnter	boolen	是否开启在input中的回车事件，点击回车默认选中（和筛选条件一致的）第一个
isEnterCongruent	boolen	开启在input中的回车事件，回车的时候内容是否要和列表中的内容匹配，true匹配，false匹不匹配都可以
optionClickFun	function	为selectSearchOption上绑定函数

这个插件是自己撸的，如果使用中有什么问题，可以联系我，或者有什么建议都可以提出。