jquery AutoComplete

JS

 

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
var suggest={
    _obj:"",
    oldvalue:"",
    init:function(obj){
    this._obj=$("#"+obj);
    this._obj.keydown(function(e){
    suggest.EventKeyDown(e.keyCode,obj);
    });
    this._obj.keyup(function(e){
    suggest.GetData(obj,e.keyCode);
    });
    this._obj.blur(function(e){
    suggest.HideDiv();
    });
    $("body").prepend("<div id='floor' class='floor'></div>");
    $("#floor").hide();
    var objPos=this.getAbsolutePos(obj);
    $("#floor")[0].style.left=objPos.x+"px";
    $("#floor")[0].style.top=objPos.y+"px";
    },
    getAbsolutePos:function(el){
    var obj=document.getElementById(el);
    var sl=obj["offsetLeft"];
    var st=obj.offsetTop+obj.offsetHeight;
    while(obj["offsetParent"])
    {
        obj=obj.offsetParent;
        sl+=obj.offsetLeft;
        st+=obj.offsetTop;
    }
    var r={x:sl,y:st};
    return r;
    },
    GetData:function(obj,keycode)
    {
    if(keycode == 38 || keycode == 40 || keycode == 13 || keycode == 27 || keycode == 9) return; 
    if(this._obj.val()!=this.oldvalue &&this._obj.val()!="")
    {
        var data=_Default.Test(this._obj.val()).value;
        if(data.length==0)
        {
            this.HideDiv();
            return;
        }
        var div="";
        for(var i=0;i<data.length;i++)
        {
            div+="<div class=unselected  onmouseout = $(this).attr('class','unselected') onmouseover = suggest.MouseOver(this)>"+data[i]+"</div>";
        }
        $("#floor").html(div);
        $("#floor").width(this._obj.width());
        $("#floor").show();
        this.oldvalue=this._obj.val();
     }
    },
    EventKeyDown:function(keycode,sInput){
    currentInput = $("#"+sInput);
    if(keycode == 13)
    {        
        currentInput.focus();
        this.hideText();
    }
    if(keycode == 27) this.hideText();    //esc
    selectedDiv = $("#floor>div[@class=selected]");
    if(selectedDiv.text() != "")
    { 
        selectedDiv.attr("class","unselected");
        if(keycode == 38) //up
        {
            if(selectedDiv.prev().text() != "")
            {
                selectedDiv.prev().attr("class","selected");
                currentInput.val(selectedDiv.prev().text());
            }
            else
            {
                $("#floor>div:last").attr("class","selected");
                currentInput.val($("#floor>div:last").text());                
            }
        }
        else if(keycode == 40) //down
        {
            if(selectedDiv.next().text() != "")
            {
                selectedDiv.next().attr("class","selected");
                currentInput.val(selectedDiv.next().text());
            }
            else
            {
                $("#floor>div:first").attr("class","selected");
                currentInput.val($("#floor>div:first").text());                
            }
        }            
    }
    else if(keycode == 38)
    {
        $("#floor>div:last").attr("class","selected");
        currentInput.val($("#floor>div:last").text());
    }
    else if(keycode == 40)
    {
        $("#floor>div:first").attr("class","selected");
        currentInput.val($("#floor>div:first").text());        
    }
    },
  HideDiv:function()
    {
    $("#floor").hide();
    $("#floor").html("");
    },
  MouseOver:function(sDiv)
  {
    $("#floor").children("div").attr("class","unselected");
    $(sDiv).attr("class","selected");
    this._obj.val($(sDiv).text());
  }
}


    </script>

CSS

 

 1    <style type="text/css">
 2    .floor
 3    {}{
 4        position: absolute;
 5        background-color:white;
 6        border: 1px solid;
 7        overflow: auto;
 8    }
 9    .unselected
    {}{
        background-color: white;
    }
    .selected
    {}{
        background-color: dodgerblue;
        color: white;
    }    
    </style>

 

前台调用：suggest.init(文本框ID);

后台文件:

 

 1    protected void Page_Load(object sender, EventArgs e)
 2    {
 3        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
 4    }
 5    [AjaxPro.AjaxMethod]
 6    public ArrayList Test(string searchValue)
 7    {
 8        ArrayList Values = new ArrayList();
 9        string str = "Select Id,Value from suggest where Value like '%"+searchValue+"%'";
        SqlDataReader sdr = SqlHelper.ExecuteReader(str);
        while (sdr.Read())
        {
            Values.Add(sdr["Value"].ToString());
          
        }
        sdr.Dispose();
        return Values;
    }