文本框输入内容进行动态提示（jquery部分）

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 查看评论