频道导航

JavaScript实现前端实时搜索功能

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了JavaScript实现前端实时搜索功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

大部分页面都具备搜索功能。而作为前端，我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户，具体实现如下：

1.基本布局：

名称">

这里涉及一个问题如何将搜索图标放入input中，网上有相关资料不做赘述：

.searcher-main {
background: #F4F4F4;
position: absolute;
left: 50%;
top: 1.2rem;
margin-left: -45%;
border-radius: 1.6rem;
width: 80%;
height: 3rem;
line-height: 3rem;
}

.searcher-text {
width: 80%;
text-align: center;
border: none;
outline: none;
background: #F4F4F4;
}

.searcher-cancel {
position: absolute;
width: 10%;
height: 3rem;
line-height: 3rem;
color: #929292;
top: 1.2rem;
right: 1rem;
}

2.step-1：

3.js部分

这里要安利IE9以上的oninput事件

onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效。 onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善。 onpropertychange不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。

JQ一般都是用这种+=html的方法，虽然累赘不过通过url或者tag标签里属性传参较容易理解。

epm.ajax(params,function(result) {
console.log(result);
console.log(TYPE)
var html = '';
List.html('');
//有结果
if(result.data.length > 0) {
$.each(result.data,function(index,value) {
goodName = value['goods_name'];
shopName = value['shop_name'];
//判断Name类型
itemName = (goodName) ? goodName : shopName;
html += '<li class="goods-list">' + itemName + ''
});
$('.searcher-list').html(html);
}
//无结果
else {
html = '<div class="no-goods">暂时无法找到此选项~

';
$('.searcher-list').html(html);
}
});
}

注意这里有一个replaceIllegalStr()方法,类似正则,目的是过滤掉一些无用的符号以免给后端接收数据带来不必要的麻烦。

= 0) { if (illegal_list[i] == '\\' || illegal_list[i] == '[') { reg = new RegExp('\\' + illegal_list[i],"g"); } else { reg = new RegExp(illegal_list[i],"g"); } str = str.replace(reg,''); } } return str.trim(); }