Jquery ：Ajax 自动完成下拉列表。。。。。

Html：

 

代码

<input id="Keyword" type="text" name="Keyword" class="input" style="width: 141px;"
                                    onkeypress="if (event.keyCode == 13) { form1.Button1.focus(); }" 
                                   onfocus="GetHotelList(this , 'Keyword');"   onkeyup="GetHotelList(this , 'Keyword');GetItems(this.value,this.id);"
                                 />

 

 

Jquery的Ajax同步获取后台数据:

代码

//页面jquery获取酒店自动完成列表。
function GetHotelList( objectTxt, obj)
{ 
   HotItems= "";
   AllItems= "";   
      

      
  var ps='';
  ps+="&city=" +document.getElementById("city").value;
  ps+="&q=" + objectTxt.value;
  ps+="&area=" +document.getElementById("area").value;  
  $.ajax
 ({                  
   async: false,       //默认true(异步请求)
   cache: false,      //默认true,设置为 false 将不会从浏览器缓存中加载请求信息。
   type: "GET",      //默认:GET 请求方式:[POST/GET]              
   url:"JqueryHotelComplete.ashx?"+ ps+ "&tem=" + Math.random(),              
   dataType:'html',   //默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"]               
   data:"", 
   success:function(result)                 
   { 
        //返回的数据不是空
        if(result !="")
        {
          datastr =result.split("@");       

            HotItems= datastr[0];     
            AllItems= datastr[1];  
            
        
            //展开列表
            ShowGetItems(obj);               
        }        
    }      
                
 });    
}

 

 

CompleteHotelList.js

 

var ObjPrintItem;//文本框
var focusId=1;

var HotItems,AllItems;

document.write("<div id='divItem' style='position: absolute; z-index:2009; width:200;'></div>");  
var arrAllItem;
var arrHotItem;

function splitItem()
{
    if(arrAllItem != null || arrAllItem != "")
    {        
        arrAllItem=AllItems.split(',');
        arrHotItem=HotItems.split(',');
    }
};

function ResetValue(obj)
{
    if(typeof(obj)=='string')
        reobj=document.all(obj);
    else
        reobj=obj;
    reobj.value = "";
}

var posLib = {
    getClientLeft:function (el) {
     var r = el.getBoundingClientRect();
     return r.left- this.getBorderLeftWidth(this.getCanvasElement(el));
    },

    getClientTop:    function (el) {
     var r = el.getBoundingClientRect();
      return r.top - this.getBorderTopWidth(this.getCanvasElement(el));
    },

    getLeft:    function (el) {
      return this.getClientLeft(el) + this.getCanvasElement(el).scrollLeft;
    },

    getTop:    function (el) {
      return this.getClientTop(el) + this.getCanvasElement(el).scrollTop;
    },

    getInnerLeft:    function (el) {
      return this.getLeft(el) + this.getBorderLeftWidth(el);
    },

    getInnerTop:    function (el) {
      return this.getTop(el) + this.getBorderTopWidth(el);
    },

    getWidth:    function (el) {
      return el.offsetWidth;
    },

    getHeight:    function (el) {
      return el.offsetHeight;
    },

    getCanvasElement:    function (el) {
      var doc = el.ownerDocument || el.document;    // IE55 bug
      if (doc.compatMode == "CSS1Compat")
        return doc.documentElement;
      else
        return doc.body;
    },

    getBorderLeftWidth:    function (el) {
      return el.clientLeft;
    },

    getBorderTopWidth:    function (el) {
      return el.clientTop;
    },

    getScreenLeft:    function (el) {
      var doc = el.ownerDocument || el.document;    // IE55 bug
      var w = doc.parentWindow;
      return w.screenLeft + this.getBorderLeftWidth(this.getCanvasElement(el)) + this.getClientLeft(el);
    },

    getScreenTop:    function (el) {
      var doc = el.ownerDocument || el.document;    // IE55 bug
      var w = doc.parentWindow;
      return w.screenTop  + this.getClientTop(el);//+ this.getBorderTopWidth(this.getCanvasElement(el))
    }
}

function Split(popup_str,popup_n,popup_s){ //字符串,取第几个数据,分割字符
    var popup_split;
     popup_split=popup_str.split(popup_s);
    return popup_split[popup_n];
}

function ShowGetItems(tbObjId)
{
    if(typeof(tbObjId)=='string')
        ObjPrintItem=document.all(tbObjId);
    else
        ObjPrintItem=tbObjId;

    GetItems(ObjPrintItem.value, tbObjId);
    
    var newX = posLib.getLeft(ObjPrintItem);
    var newY = posLib.getTop(ObjPrintItem)+20;
    
    document.getElementById("divItem").style.top=newY;
    document.getElementById("divItem").style.left=newX;
}

function GetItems(str,tbObjId,isqingkong)
{

    
    splitItem();
    var KeyCode=parseInt(event.keyCode);
    if(KeyCode!=38 && KeyCode!=40 && KeyCode!=13 && KeyCode!=27)
    {
//        str=str.toLowerCase();
        var count=0;
        var tab;
        if(tbObjId.indexOf("quchenghb") > -1)
        { tab = '<table width="480" border="0" cellpadding="0" cellspacing="1" bgColor="#626B7B">'; }
        else if(tbObjId.indexOf("pinpai") > -1)
        { tab = '<table width="480" border="0" cellpadding="0" cellspacing="1" bgColor="#626B7B">'; }
        else
        { tab = '<table width="300" border="0" cellpadding="0" cellspacing="1" bgColor="#626B7B">'; }
        
        tab+= '<tr align="center">';
        tab+= '   <td >;
    }
}