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 原文链接
阅读:91 评论:0 查看评论