jquery实现自动完成

1.首先导入jquery.js文件

2.写样式,此样式是设置自动完成项显示的

<style type="text/css">

A.liwc
{
 background-color: #ffffff;
 display: block;
 width: 100%;
 height: auto;
 color: #274f57;
 text-decoration: none;
}
A.liwc:hover
{
 background-color: #D3F1AB;
 font-size: 12px;
 color: #274f57;
 width: 100%;
 height: auto;
 text-decoration: none;
}

</style>

 3.把一下代码封装到一个js里面

 jQuery(function(){
        //input获取焦点时在其旁边显示div
         $.extend({
         zdwc:function(inp,divwc,url){
            var input = $("#"+inp);            
            var offset = input.offset();
            $('#'+divwc).css('width',input.css("width"));
            $('#'+divwc).css('display','block');
            $('#'+divwc).css('top',offset.top+16);
            $('#'+divwc).css('left',offset.left);
            $.getJSON(url,{ xm: input.val()},function(data){
               var li="<ul style='margin:0px;padding:0px;'>";
              $.each(data, function(i,item){
                if(item!=null){
                    li+="<li  style='width:"+input.css("width")+";list-style-type:none;'><a  class='liwc'>"+item.Xm+"</a></li>"
                }
               });
            li+="</ul>";
            $("#"+divwc).html(li);
            $(".liwc").click(function(){ var yhm=$(this).text();input.val(yhm); $('#'+divwc).css('display','none');});
            });
            }
        });     
    });

 4.一般处理程序中

   public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
        string yhm=context.Request["xm"] ?? "";
        context.Response.Write(js.Serialize(lis(yhm)));
    }
 

    public System.Collections.Generic.List<t_yh01> lis(string ll) 
    {
        System.Collections.Generic.List<t_yh01> name = new System.Collections.Generic.List<t_yh01>();
        if (ll != "")
        {
            name=t_yh01DAO.Gets(" where xm like '" + ll + "%' order by xm"); 
        }
        return name;
    }