在线求助！实现类似百度搜索框的那种功能。

页面上有一个textbox输入框，还有一个绑定数据的dropdownlist,实现在textbox输入字符，动态改变dropdwonlist的绑定数据,能否提供一些ajax动态传输数据和JSON格式转换的文章。谢谢！

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
        <head>
            <title>
                无标题页
            </title>
            <style type="text/css">
                ul, li { margin: 0; padding: 0; list-style-type: none; } li { padding-left:
                5px; height: 35px; vertical-align: middle; line-height: 35px; color: #000000;
                font-weight: 400; cursor: pointer; }
            </style>
        </head>
        
        <body>
            <div>
                <input id="QueryText" type="text" style="height: 35px; width: 350px; font-size: 15px;
                line-height: 35px; border: 1px solid  #9A9A9A;" onkeydown="OnTextChanges();" />
                <input id="Button1" type="button" value="button" style="height: 40px; vertical-align: top;
                border: 1px solid red;" />
                <div style="position: relative; width: 405px; border: 1px solid #817F82; display: none;"
                id="Coneten">
                </div>
            </div>
        </body></html>
    <script type="text/javascript">
        var s = ["观看了几集", "自行车v", "斯蒂芬", "为犹如一幅", "新增词vd", "类库uyy", "公司vvb", "阿斯蒂芬洒出", "为范文芳", "自行车ve", "IOU", "新增词", "你", "威尔威", "阿斯蒂芬"];
        function OnTextChanges() {
            var Count = 0;
            var DIV = document.getElementById("Coneten");
            var text = document.getElementById("QueryText").value;
            DIV.innerHTML = "";
            for (var i = 0; i < s.length; i++) {
                if (s[i].indexOf(text) > 0) {
                    if (i == 0) {
                        DIV.innerHTML += "<ul>";
                    }                DIV.innerHTML += "<li onclick='LIOnClick(this);'>" + s[i] + "</li>";                if (i == s.length - 1) {
                        DIV.innerHTML += "</ul>";
                    }
                    Count++;
                }
            }
            if (Count > 0) {
                DIV.style.display = "";
            } else {
                DIV.style.display = "none";
            }
        }
        function LIOnClick(obj) {
            document.getElementById("QueryText").value = obj.innerText;
            var DIV = document.getElementById("Coneten");
            DIV.innerHTML = "";
            DIV.style.display = "none";
        }
    </script>纯JS，事件上你在调一调