输入联想 输入关键字 显示下拉包含关键字的文字

 

    <script type="text/javascript" language="javascript">
        var IE = new Function('', 'if(navigator.appName.indexOf("Explorer")>=0)return true;if(navigator.appName.indexOf("Netscape")>=0)return false');
        var sou = function () {
            var shuru = document.getElementById("txtKeyWords");
            var shuchu = document.getElementById("ss");
            var sxPress = false;
            var oldValue;
            shuchu.onmouseover = function (e) {
                e || (e = window.event);
                var eveSrc = (typeof e.target != "undefined") ? e.target : e.srcElement;
                eveSrc = eveSrc.tagName == "SPAN" ? eveSrc.parentNode : eveSrc;
                if (eveSrc.tagName == "LI") {
                    var eveParent = eveSrc.parentNode;
                    for (i = 0; i < eveParent.childNodes.length; i++)
                        eveParent.childNodes[i].className = "";
                    eveSrc.className = "hov";
                }
            } //end onmouseover
            function down(e) {
                e || (e = window.event);
                var eveSrc = (typeof e.target != "undefined") ? e.target : e.srcElement;
                if (eveSrc.tagName == "LI") {
                    if (eveSrc.parentNode.parentNode.id == "ss") {
                        shuru.value = eveSrc.firstChild.data;
                        $('#btnSearch').click();
                        return;
                    }
                }
                if (eveSrc == shuru) return;
                shuchu.style.visibility = "hidden";
            } //end down
            document.onmousedown = down;
            shuru.onkeydown = function (e) {
                e || (e = window.event);
                switch (e.keyCode) {
                    case 13: $('#btnSearch').click(); return false;
                    case 40:
                        if (shuchu.style.visibility == "hidden") return;
                        sxPress = true;
                        var ele = shuchu.firstChild.childNodes;
                        var thisEle = new Object();
                        for (i = 0; i < ele.length; i++)
                            if (ele[i].className == "hov")
                            { thisEle = ele[i]; break; }
                        if (typeof thisEle.className == "undefined") {
                            thisEle = ele[0];
                            thisEle.className = "hov";
                            shuru.value = thisEle.firstChild.data;
                            return;
                        }
                        thisEle.className = "";
                        if (thisEle == ele[ele.length - 1]) { shuru.value = oldValue; return; }
                        shuru.value = thisEle.nextSibling.firstChild.data;
                        thisEle.nextSibling.className = "hov";
                        break;

                    case 38:
                        if (shuchu.style.visibility == "hidden") return;
                        sxPress = true;
                        var ele = shuchu.firstChild.childNodes;
                        var thisEle = new Object();
                        for (i = 0; i < ele.length; i++)
                            if (ele[i].className == "hov")
                            { thisEle = ele[i]; break; }
                        if (typeof thisEle.className == "undefined") {
                            thisEle = ele[ele.length - 1];
                            thisEle.className = "hov";
                            shuru.value = thisEle.firstChild.data;
                            return;
                        }
                        thisEle.className = "";
                        if (thisEle == ele[0]) { shuru.value = oldValue; return; }
                        shuru.value = thisEle.previousSibling.firstChild.data;
                        thisEle.previousSibling.className = "hov";
                        break;

                    default:
                        if (!IE())
                            change();
                        sxPress = false;
                        break;
                }
            } //end onkeyup
             shuru.onpropertychange = change;
             shuru.oninput = change;
            function change()//生成相关搜索
            {
                if (!sxPress) oldValue = shuru.value;
                else return;
                if (shuru.value != "" && shuru.value != "输入您想要的商品") {
                    var url1 = "<%=WebSite %>hander/Getkeywords.ashx?keywords=" + escape(shuru.value) + "";

                    $.ajax({
                        type: "GET",
                        url: url1,
                        success: function (msg) {
                          
                            var detail;
                            detail = msg.split("||");
                            var str = "";
                            if (detail.length == 2 && shuru.value == detail[0])
                            { str = ""; }
                            else {
                                for (i = 0; i < detail.length - 1; i++) {
                                    str += "<li>" + detail[i] + "</li>";
                                }
                            }
                            shuchu.style.visibility = "visible";
                            shuchu.innerHTML = "<ul>" + str + "</ul>";
                            if (str == "")
                                shuchu.innerHTML = "";
                        }
                    })

                } else {
                    shuchu.style.visibility = "hidden";
                }
            } //end change
        }
         function checkKeyWords() {
            if ($("#txtKeyWords").val() == "输入您想要的商品" || (new RegExp("^\[ \t]*$").test($("#txtKeyWords").val()))) {
                alert("请输入要搜索的关键字！");
                return false;
            }
            return true;
        }    
    </script>

 

 

  <div id="s">
                                        <input maxlength="30" name="txtKeyWords" id="txtKeyWords" autocomplete="off" class="searchclass"
                                            value="输入您想要的商品" onkeyup="this.className=''" "  onclick="if(this.value=='输入您想要的商品')this.value=''; sou();"
                                            style="vertical-align: bottom; width: 100%; font-size: 14px; border: 0px" />
                                        <div id="ss">
                                        </div>
                                    </div>

 

    div#s {position: relative;z-index:500; }
div #ss {z-index:500; position: absolute;width: 101%;visibility: hidden;left: 0px;top: 22px;}
div #ss ul {border: 1px solid #000000;text-align: left;}
div #ss li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
font-size: 14px;
}
div#ss li.hov {background-color: #6666FF;color: #FFFFFF;}
div#ss UL {list-style-type: none;}

 

 

   <form id="form1" runat="server">
    <%--解决 当按下回车抢占ImageButton的点击事件的问题 勿删除！--%>
    <div style="width: 0px; height: 0px;">
        <input type="image" style="width: 0px; height: 0px; display: none" onclick="return false" /></div>

 

 

 

可以参考http://dlstu.cn/code/article/Code/814.htm