欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 18:27:10
在某些项目中使用下拉列表的时候,产品经理可能希望下拉列表可以支持文中/全拼/简拼的多种搜索功能,但是国外的插件都不支持的(他们只有字母呀,支持中文搜索=》字与字核对),而国内很多框...

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

使用说明

首先必须引入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上绑定函数

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