html5 自动提示功能

1.定义HTML标签

<input type="text" id="bookId" list="idList">

<datalist id="idList" ></datalist>

2.JS脚本

$(function(){
　//变化事件
　 $('#bookId').bind('input propertychange', function() {
　　　$.ajax({
　　　type : "POST",　

　　　url: '../../../',
　　　data:{bookId:$(this).val()},
　　　success: function(data){
　　　　if (json.status === 200) {

　　　　　　optionList = json.data.map(item=> `<option value="\${item}"></option>`).join('');

　　　　　　console.time('计时器1');

　　　　　　$('#idList').remove();

　　　　　　let oFragmeng = document.createDocumentFragment(); //文档碎片，优化DOM操作

　　　　　　let dataList = $(`<datalist id="idList"></datalist>`);

　　　　　　dataList.html(optionList);

　　　　　　oFragmeng.appendChild(dataList.get(0));

　　　　　　document.body.appendChild(oFragmeng);

　　　　　　console.timeEnd('计时器1');

　　　　}

　　　});
　　})
});

3.相关知识

　　HTML5的标签datalist

　　文档碎片，优化DOM操作,document.createDocumentFragment，由于直接操作DOM，响应速度不理想。

　　bind('input propertychange',function(){});

　　console.time('计时器1');

　　JSP中使用ES6的字符串模板，`<option value="\${item}"></option>`

　　了解一下，js防抖和节流

4.个人优化方法

　　防止输入里频繁的AJAX调用，只有在输出第一个字母的时候，进行AJAX操作。检索出全部相关信息。后续输入不检索。

　　删除为空的时候，把dataList删除。防止再输入时，会有datalist显示的抖动。

　　需要记录上次输出的内容，进行比较。