html部分
姓名<input type="text" name="name" id="name" /><br />
<ul id="tip" style="margin: 0;padding:0;"></ul>
jquery部分
//文本框输入内容进行动态提示
$("input[name='name']").keyup(function(){
//定义要传递的url和值
var url=$("input[name='url']").val()+"/selectname";
var val=$("input[name='name']").val();
if(val.length>0){ //当文本内容不为空时进行异步检索
$.post(url,{keyname:val},function(data,status){
if(status=="success"){ //当接收服务器端数据成功时
var tipHtml=""; //拼接html标签
var tipText=$.parseJSON(data); //进行解析json数据
if(tipText.length<=0) {
$('#tip').hide();
return;
}else{
$('#tip').show();
}
for(var i=0;i<tipText.length;i++){
tipHtml+="<li>"+tipText[i].name+"</li>";
}
//获得输入姓名文本框的宽度
var width=parseInt($('input[name="name"]').width());
//设置ul宽度和文本框的宽度相等
$("#tip").html(tipHtml).width(width);
$("#tip").css("position","relative").css("left",32).css("list-style-type","none");
$("#tip li").click(function(){
$("#tip").hide();
$("input[name='name']").val($(this).text());
});
}
});
}
});
作者:buyingfei888 发表于2013-7-17 22:04:03
原文链接