select2插件空格分词模糊匹配模糊搜索

最新推荐文章于 2025-07-10 00:00:00 发布

olight

最新推荐文章于 2025-07-10 00:00:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/olight/article/details/72763005

本文介绍如何使用Select2插件实现自定义匹配功能，通过JavaScript代码允许用户输入多个关键词进行选项匹配，并且这些关键词不需要按特定顺序排列。

效果：任意空格加关键词可匹配选项，可以不按照顺序

< select id= "id" name = "id" class= "inline" style =" width: 360px ;" required >
        < c:forEach var= "wbclOrder" items =" ${fns:getWbclOrderLstByRq(wbclOrder.beginDate,wbclOrder.endDate)} ">
             < option value =" ${wbclOrder.id} "> [${wbclOrder.ylmc}].[${wbclOrder.ldlsh}].[${wbclOrder.hbcp}] </ option>
       </ c:forEach>
</ select>

在js区域ready下，写入

$( "#id").select2({
                     matcher: function (inputs, data) {
                            //console.log("inputs==="+inputs);
                            //console.log("data==="+data);
                           inputs=$.trim(inputs);
                            if (inputs.length == 0) return true ;
                           if((data.toUpperCase()).indexOf((inputs.toUpperCase()))>=1) return true ;
                            if(inputs.indexOf( " " )>0){
                                 var keywords=inputs.split( " " );
                                 for( var i = 0; i < keywords.length; i++){
                                      //console.log($.trim(keywords[i]));
                                      if((data.toUpperCase()).indexOf(($.trim(keywords[i]).toUpperCase()))==-1) return null ;
                                }
                                 return data;
                           }
                   }
 });

主要参看了select2文档和源码，全网百度不到相关解决方法，在stackflow上倒是有类似解决方法。

原理上还不是非常懂，特别是return null和return data，语法上也不是很优雅，请见谅。