js中實現輸入框類似百度搜索的智能提示效果

說明:我這里顯示的數據采用詞典(詞典在js中自定義的,看下面文字),主要顯示key.

頁面元素:

<style type="text/css">.search

{
       left: 0;
       position: relative;
    }
 #auto_div
    {
       display: none;
       width: 92%;
       min-height:50px;
       max-height:200px;
       overflow-y:auto;
       border: 1px #74c0f9 solid;
       background: #FFF;
       position: absolute;
       top: 34px;
       left: 0;
       color: #323232;

     }      
</style>

<div class="search"> <input type="text" name="unit" id="search_text" autocomplete="off" class="input input2 required" placeholder="請輸入關鍵字查詢材料單位"> <div id="auto_div" ></div> <i class="i-star"></i> </div>

$(function(){
        //單位搜索
        old_value = $("#search_text").val();
        $("#search_text").focus(function () {
            if ($("#search_text").val() == "") {
                AutoComplete("auto_div", "search_text", unitsDic);
            }
        });
        $("#search_text").keyup(function () {
            AutoComplete("auto_div", "search_text", unitsDic);
        });
        //設置待選單位數據 ,這里的數據通過freemarker獲取的list值
        <#list unitList as unitInfo>
            <#if unitInfo.text??>
                unitsDic.add('${unitInfo.text?trim}','${unitInfo.id}');
            </#if>
        </#list>
    });

 //快速搜索單位
    //存儲獲取服務器單位數據,存的鍵值對
    var unitsDic = new Dictionary();
    var old_value = "";
    var highlightindex = -1;   //高亮
    //自動完成
    function AutoComplete(auto, search, unitsDic) {
        if ($("#" + search).val() != old_value || old_value == "") {
            var autoNode = $("#" + auto);   //緩存對象（彈出框）
            var carlist = new Array();
            var n = 0;
            old_value = $("#" + search).val();
            for(var key in unitsDic.datastore){
                if (key.indexOf(old_value) >= 0) {
                    carlist[n++] = key;
                }
            }
            if (carlist.length == 0) {
                autoNode.hide();
                return;
            }
            autoNode.empty();  //清空上次的記錄
            for (i in carlist) {
                var wordNode = carlist[i];   //彈出框里的每一條內容
                var newDivNode = $("<div>").attr("id", i);    //設置每個節點的id值
                newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
                newDivNode.html(wordNode).appendTo(autoNode);  //追加到彈出框
                //鼠標移入高亮，移開不高亮
                newDivNode.mouseover(function () {
                    if (highlightindex != -1) {        //原來高亮的節點要取消高亮（是-1就不需要了）
                        autoNode.children("div").eq(highlightindex).css("background-color", "white");
                    }
                    //記錄新的高亮節點索引
                    highlightindex = $(this).attr("id");
                    $(this).css("background-color", "#ebebeb");
                });
                newDivNode.mouseout(function () {
                    $(this).css("background-color", "white");
                });
                //鼠標點擊文字上屏
                newDivNode.click(function () {
                    //取出高亮節點的文本內容
                    var comText = autoNode.hide().children("div").eq(highlightindex).text();
                    highlightindex = -1;
                    //文本框中的內容變成高亮節點的內容
                    $("#" + search).val(comText);
                    //設置材料編碼值
                    getUnitCode(comText);
                })
                if (carlist.length > 0) {    //如果返回值有內容就顯示出來
                    autoNode.show();
                } else {               //服務器端無內容返回 那么隱藏彈出框
                    autoNode.hide();
                    //彈出框隱藏的同時，高亮節點索引值也變成-1
                    highlightindex = -1;
                }
            }
        }
        //點擊頁面隱藏自動補全提示框
        document.onclick = function (e) {
            var e = e ? e : window.event;
            var tar = e.srcElement || e.target;
            if (tar.id != search) {
                if ($("#" + auto).is(":visible")) {
                    $("#" + auto).css("display", "none")
                }
            }
        }
    }

    /*自定義字典 Dictionary類*/
    function Dictionary() {
        this.datastore = new Object();
        this.add = add;
        this.getValue = getValue;
    }

    function add(key, value) {
        this.datastore[key] = value;
    }

    function getValue(key) {
        return this.datastore[key];
    }

效果如下:

 

該文當可以參考寫的更簡潔的:https://blog.csdn.net/yedajiang44/article/details/72758269

上面這種是一次先已經將數據加載到頁面上了,還有中直接通過發起請求的方式,實時查詢的方式.可以參考下面的方式:

https://www.cnblogs.com/leiting/p/9513711.html