html用户文档如何实现搜索功能,JavaScript实现前端实时搜索功能-20210406083939.pdf-原创力文档...

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