前端模糊查询

<div class="input-select">
    <input style="width:250px;"  id="index"><i class="iconfont icon-fangdajing"></i>
    <ul class="input-list" style="display: block;">
            <li><b>aupres/欧珀莱</b></li>
            <li><b>biotherm/碧欧泉</b></li>
            <li><b>casio/卡西欧</b></li>
            <li><b>l'occitane/欧舒丹</b></li>
            <li><b>l＇oreal/欧莱雅</b></li>
            <li><b>ochirly/欧时力</b></li>
            <li><b>ohui/欧蕙</b></li>
            <li><b>欧林雅</b></li>
            <li><b>欧美</b></li>
            <li><b>欧美</b></li>
     </ul>
</div>

 

<script>
    $(function(){
            //键盘按键弹起时执行
            $('#index').keyup(function(){
                var index = $.trim($('#index').val().toString().toUppCase()); // 去掉两头空格
                if(index == ''){ // 如果搜索框输入为空
                    $('.input-select li').removeClass('on');
                    return false;
                }
                var parent = $('.allsku');
                $('.input-select li').removeClass('on');
                $(".input-select li").each(function(){
                    if($(this).text().toUpperCase().indexOf(index)!=-1){
                        $(this).prependTo(parent).addClass('on');
                    }
                })
            });
        });
</script>                                    

 

对于模糊查询，一般都是传关键字给后端，由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求，在一定程度上提高用户体验

//字符串方法indexOf
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].indexOf(keyWord)>=0){
        arr.push(list[i]);
    }
}
return arr;

//正则表达式
var len = list.length;
var arr = [];
var reg = new RegExp(keyWord);
for(var i=0;i<len;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].match(reg)){
        arr.push(list[i]);
    }
}
return arr;