Jquery输入框下拉模糊搜索提示功能实现

效果图

css代码

基本上没什么设计，能用就好。

#auto_div {
    position: absolute;
    z-index: 999;
    left: 0px;
    top: 33px;
    width: 468px;
    border: 1px solid #74c0f9;
    display: none;
    background: #FFF;
}

Jquery部分

• 首先是获取提示词部分

var highlightindex = -1; //高亮设置（-1为不高亮）
//自动完成
function AutoComplete(auto, search) {
    if ($("#" + search).val() != "") {
        var autoNode = $("#" + auto); //缓存对象（弹出框）
        var carlist = new Array();
        var n = 0;
        var mylist = [];
        var maxTipsCounts = 8 // 最大显示条数
        var aj = $.ajax({
            url: '/xxx/xxx' + "&str=" + $("#" + search).val(), // 跳转到后台  
            data: {},
            type: 'get',
            cache: false,
            dataType: 'json',
            success: function(data) {
                if (data.error == "0") {
                    mylist = data.info;
                    if (mylist == null) {
                        autoNode.hide();
                        return;
                    }
                    autoNode.empty(); //清空上次的记录
                    for (i in mylist) {
                        if (i < maxTipsCounts) {
                            var wordNode = mylist[i]; //弹出框里的每一条内容
                            var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值

                            document.querySelector("#auto_div").style.width = $("#search_text").outerWidth(true) + 'px'; //设置提示框与输入框宽度一致

                            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);
                                $("#search-form").submit();
                            })
                            if (mylist.length > 0) { //如果返回值有内容就显示出来
                                autoNode.show();
                            } else { //服务器端无内容返回 那么隐藏弹出框

                                autoNode.hide();
                                //弹出框隐藏的同时，高亮节点索引值也变成-1
                                highlightindex = -1;
                            }
                        }
                    }
                }
            }
        });
    }
}

• 键盘操作部分

$(function() {
    //键盘操作
    $("#search_text").keyup(function(event) {
        //处理键盘操作
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        if (keyCode == 38 || keyCode == 40) {
            if (keyCode == 38) { //向上
                var autoNodes = $("#auto_div").children("div");
                if (highlightindex != -1) {
                    autoNodes.eq(highlightindex).css("background-color", "white");
                    highlightindex--;
                } else {
                    highlightindex = autoNodes.length - 1;
                }
                if (highlightindex == -1) {
                    highlightindex = autoNodes.length - 1;
                }
                autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
            }
            if (keyCode == 40) { //向下
                var autoNodes = $("#auto_div").children("div");
                if (highlightindex != -1) {
                    autoNodes.eq(highlightindex).css("background-color", "white");
                }
                highlightindex++;
                if (highlightindex == autoNodes.length) {
                    highlightindex = 0;
                }
                autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
            }
        } else if (keyCode == 13) { //回车键
            if (highlightindex != -1) {
                var comText = $("#auto_div").hide().children("div").eq(highlightindex).text();

                highlightindex = -1;
                $("#search_text").val(comText);
                if ($("#auto_div").is(":visible")) {
                    $("#auto_div").css("display", "none")
                }
                $("#search-form").submit();
            }
            checkInput();
        } else { 
            if ($("#search_text").val() == "") {
                $("#auto_div").hide();
            } else {   //有文字输入时获取提示词
                AutoComplete("auto_div", "search_text");
            }
        }
    });

    //点击页面隐藏自动补全提示框
    document.onclick = function(e) {
        var e = e ? e : window.event;
        var tar = e.srcElement || e.target;
        if (tar.id != "search_text") {
            if ($("#auto_div").is(":visible")) {
                $("#auto_div").css("display", "none")
            }
        }
    }
});

当有输入时就会自动获取提示词，在移动端设备的话，没有鼠标移入高亮，直接点击提示词然后进行搜索。

maxTipsCounts可以设置最大显示提示条数。

对于移动端设备来说，并没有键盘的上下左右操作，可以把这部分省略了，然后写成一个函数。