jquery 智能搜索文本框

在网上搜罗了一个智能搜索框觉的还不错，就拔下来改改，用着还不错！样式不太好看，可根据个人爱好调整！

1、控制查询数据的样式

<style>
    #searchresult{width:130px; position:absolute;
    z-index:1; overflow:hidden; left:130px; top:71px;background:#E0E0E0;
    border-top:none;
    }
    .line{font-size:12px; background:#E0E0E0; width:130px; padding:2px;}
    .hover{background:#007ab8; width:130px; color:#fff;}
    .std{ width:150px;}
</style>

 

2、html代码

<input type="text" style=" width:150px;" id="txt_search"/>
<div id="searchresult" style=" display:none;" ></div>

 

3、js控制代码

--键入事件

$("#txt_search").keyup(function (evt) {
        ChangeCoords(); //控制查询结果div坐标
        var k = window.event ? evt.keyCode : evt.which;
        //输入框的id为txt_search，这里监听输入框的keyup事件
        //不为空 && 不为上箭头或下箭头或回车
        if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
            CallAction //ajax请求 替换自己的代码   

            (
                "/Contract/SearchResult",//ajax请求 替换自己的代码   
                { searchValue: $("#txt_search").val() },
                function (data) {
                    if (data != "") {
                        layer = "";
                        layer = "<table id='aa'>";
                        for (var i = 0; i < data.length; i++) {
                            layer += "<tr class='line'><td class='std'>" + data[i] + "</td></tr>";
                        }
                        layer += "</table>";

                        //将结果添加到div中    
                        $("#searchresult").empty();
                        $("#searchresult").append(layer);
                        $(".line:first").addClass("hover");
                        $("#searchresult").css("display", "");

                        //鼠标移动事件

                        $(".line").hover(function () {
                            $(".line").removeClass("hover");
                            $(this).addClass("hover");
                        }, function () {
                            $(this).removeClass("hover");
                            //$("#searchresult").css("display", "none");
                        });

                        //鼠标点击事件
                        $(".line").click(function () {
                            $("#txt_search").val($(this).text());
                            $("#searchresult").css("display", "none");
                        });
                    } else {
                        $("#searchresult").empty();
                        $("#searchresult").css("display", "none");
                    }
                }
                , function () {
                    $.unblockUI();
                    $(this).removeClass("hover");
                }
            );
        }
        else if (k == 38) {//上箭头
            $('#aa tr.hover').prev().addClass("hover");
            $('#aa tr.hover').next().removeClass("hover");
            //$('#txt_search').val($('#aa tr.hover').text());
        } else if (k == 40) {//下箭头
            $('#aa tr.hover').next().addClass("hover");
            $('#aa tr.hover').prev().removeClass("hover");
            //$('#txt_search').val($('#aa tr.hover').text());
        }
        else if (k == 13) {//回车
            $('#txt_search').val($('#aa tr.hover').text());
            $("#searchresult").empty();
            $("#searchresult").css("display", "none");
        }
        else {
            $("#searchresult").empty();
            $("#searchresult").css("display", "none");
        }
    });
    $("#searchresult").bind("mouseleave", function () {
        $("#searchresult").empty();
        $("#searchresult").css("display", "none");
    });

 

//设置查询结果div坐标

function ChangeCoords() {
 //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
    //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
    var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型
    var top = $("#txt_search").position().top+20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
    $("#searchresult").css("left", left + "px"); //重新定义CSS属性
    $("#searchresult").css("top", top + "px"); //同上
}