智能提示框 datalist

需求   ：  搜索框    老大不喜欢单纯下拉框（太多东西让你选   乱花渐欲迷人眼，好吧  眼花缭乱），

                               他想一边输入（搜索内容包含的内容）一边筛选出下拉框的内容     

 

果断使用 HTML 的  datalist  标签

<input type="text" autocomplete="off" class="form-control"  list="chiplist">
<datalist id="chiplist" ></datalist>

$.ajax({
        type: "POST",
        dataType: "json",
        url: "/getChip.do",
        success: function (chiplist) {
            var length = chiplist.length;
            if (length  > 0) {
                for (var i = 0; i < length ; i++) {
                    var item=chiplist[i];
                    $('#chiplist')
                        .append('<option value="' + item.ChipName + '">'  + item.ChipName +   '</option>');
                }
            }
        }
    });

 

 

---  更新与2019-08 -31

测试时数据量小没问题，数据量大（15条以上）时     不美观

因为datalist 标签不支持css样式美化（样式由浏览器）， 想实现缩小下拉框长度，弄个滚动条，计划泡汤

 jq插件网 这个 （兼容ie  只要把selectivity-jquery.js 控制台报错的所有字符全部注释掉）

http://www.jq22.com/jquery-info17813

多功能下拉分页选择插件SelectPage(原创)

http://www.jq22.com/jquery-info14227   

 

最后希望  HTML 的  datalist  能完善点，这功能真的很强大，完全不用导入插件等。

既然是下拉框那就是无法编辑

http://www.jq22.com/jquery-info17813

http://www.jq22.com/jquery-info4493