<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;