首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

在线!实现类似百度搜索框的那种功能

2013-04-20 
在线求助!实现类似百度搜索框的那种功能。页面上有一个textbox输入框,还有一个绑定数据的dropdownlist,实现

在线求助!实现类似百度搜索框的那种功能。
页面上有一个textbox输入框,还有一个绑定数据的dropdownlist,实现在textbox输入字符,动态改变dropdwonlist的绑定数据,能否提供一些ajax动态传输数据和JSON格式转换的文章。谢谢!
[解决办法]
autocomplate搜下吧
[解决办法]

<!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,事件上你在调一调

热点排行