在线求助!实现类似百度搜索框的那种功能。
页面上有一个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>