JS效果：像百度搜索框一样，在文本框中输入字符后，自动出现提示下拉框
日期：2014-05-16 浏览次数：20446 次
求助JS效果：像百度搜索框一样，在文本框中输入字符后，自动出现提示下拉框
这个效果我思考如下：
(1)下拉框可能用<div>来做
(2)需要与服务器实时交互，因为下拉框中出现的内容从服务器端读取的（用到AJAX）
求助较为详细的代码，谢谢了
------解决方案--------------------
前几天才做了一个，http://www.vichy.com.cn/
这个效果我思考如下：
(1)下拉框可能用<div>来做
(2)需要与服务器实时交互，因为下拉框中出现的内容从服务器端读取的（用到AJAX）
求助较为详细的代码，谢谢了
------解决方案--------------------
前几天才做了一个，http://www.vichy.com.cn/
- JScript code
$(".searchText").bind("keyup", function(){
if(later!=null) clearTimeout(later);
later = setTimeout(function(){
var keyword = $(".searchText").val();
if(keyword!=""){
$.get("/skin.aspx", {keywords: keyword}, function(data){
var resHtml = "";
if($(data).find("keyword").length > 0){
$(data).find("keyword").each(function(index){
resHtml += "<li onmouseover=\"rs_event.hover()\" onmouseout=\"\" onclick=\"rs_event.click('"+$(this).find("name").text()+"')\">"+$(this).find("name").text()+"</li>\n";
});
$(".search_complete").html("").append(resHtml).show();
if($(data).find("keyword").length>20){
$(".search_complete").css({height:'400px', overflowY:'auto'});
}else{
$(".search_complete").css({height:'auto'});
}
}else{
$(".search_complete").hide();
}
});
}else{
$(".search_complete").hide();
}
}, 800) ;
});
------解决方案--------------------
能获取数据的话，剩下的就是定义div的显示样式而已，用css，我感觉用jquery中的ajax还是挺好用的
------解决方案--------------------
其实网上有现成的js控件的.
我前不久也模仿的写过。
我去找找！
------解决方案--------------------
学习下 哈！
------解决方案--------------------
纯js写的
- HTML code
<!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 runat="server">
<title>Auto Complete</title>
<style type="text/css">
.hlight{background-color:Red}
.normal{backgroud-color:transparent;}
</style>
<script language="javascript" type="text/javascript" src="../../JS/jquery-1[1].3.2.min.js"></script>
<script>
function doit(evt)
{
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode?evt.keyCode:evt.which;
if(key==38|key==40|key==13)return;
var wd = document.getElementById("wd").value;
if(wd.length==0)return;
$.ajax({
url:'../../Example/AutoComplete/Handler1.ashx',
type:'POST',
dataType:'json',
data: "wd="+wd,
error:function(x){alert(x.status);},
success:function(data){$("#show_wd").html(setTable(data)).show();}
});
}
//设置拼接Table
function setTable(jsn)
{
if(jsn.s.length==0|jsn.s[0]==""|jsn.s[0]=="undefined")
{
document.getElementById("show_wd").style.display="none";
return"";
}
var html ="<table id=\"tb\" width=\"100%\">";
for(var i in jsn.s)
{
html+="<tr onmouseover=\"hLight(this)\"><td on
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
