JavaScript实实现现前前端端实实时时搜搜索索功功能能
大部分页面都具备搜索功能。而作为前端,我们的目的只是将用户 入的内容返回给后台而后呈现反馈数据给用户,具体实现如
下:
1.基基本本布布局局::
取消
这里涉及一个问题如何将搜索图标放入input 中,网上有相关资料不做赘述:
.searcher {
background: rgba( 55, 55, 55, 0);
position: fixed;
z-index: 999;
width: 100%;
height: 6rem;
text-align: center;
font-size: 1.6rem;
}
.searcher-main {
background: #F4F4F4;
position: absolute;
left: 50%;
top: 1. rem;
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: #9 9 9 ;
top: 1. rem;
right: 1rem;
}
2.step-1::
3.js部部分分
这里要安利IE9 以上的oninput事件
onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效。
onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键 (按住键盘不放)等细节上并不完善。
onpropertychange不用考虑是否失去焦点,不管j s操作还是键盘鼠标手动操作,只要HT ML元素属性发生改变即可立即捕获到。
遗憾的是,onpropertychange为IE专属的。
//监听input框,实时渲染
$('.searcher-text ').on('input ', function() {
initSearchList();
});
JQ一般都是用这种+=htm 的方法,虽然累赘不过通过ur 或者tag标签里属性传参较容易理解。
//渲染搜索列表
function initSearchList() {
var List = $('.searcher-land ul');
var params = {};
//搜索过滤字符
var SEARCH_KEY = $('.searcher-text ').val()
params['action'] = 'get_sear