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

Html：

代码
<input id="Keyword" type="text" name="Keyword" class="input" style=" 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; 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 id="Popup_Tab" align="center" bgcolor="#ffffff">';
        tab+= '    <table width="98%" border="0" cellpadding="0" cellspacing="0" bgColor="#ffffff">';
        tab+= '  <tr align="center">';
        tab+= '    <td height="23" align="left" id="td_Title" style="background-color: #DBF1D4">中文或拼音 ↑↓选择 Enter选择 Esc清空退出</td>';
        tab+= '  </tr>';
        tab+= '  <tr align="center">';
        tab+= '    <td height="1" class="dian2"></td>';
        tab+= '  </tr>';
        tab+= '    </table>';
        tab+= ' <table id="tbl_Iterms" width="98%" border="0" cellspacing="0" cellpadding="2" style="font-size: 9pt">';


        
        if(str=="")
        {
            
            for(i=0; i <= arrHotItem.length-1; i++)
            {
                if(arrHotItem[i].indexOf(str) > -1)
                {
                    
                    tab+= '  <tr id="trIterm'+count+'" name="'+arrHotItem[i]+'"';
                    tab+='  onMouseOver="SetChangesIterm('+count+')"';
                    tab+=' onClick="SetItemValue()"'+' align="center" style="cursor:hand" bgColor="#ffffff">';                    
                    if(tbObjId.indexOf("quchenghb") > -1) //拼音|去程航空公司 航班号 时间|id|类型|回程航空公司 航班号 时间|出发地|目的地|票点名称,
                    {
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[3]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[1]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[4]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[8]+'</td>';                                
                                
                    }
                    else if(tbObjId.indexOf("pinpai") > -1)  //品牌拼音|品牌|车型|车座|师傅|电话|车号
                    {
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[1]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[2]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[3]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[4]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[5]+'</td>';
                        tab+= '<td align="left" >'+arrHotItem[i].split('|')[6]+'</td>';        
                    }
                    else
                    {
                        if(arrHotItem[i] != "")
                        {
                           //tab+= '<td align="left" >'+arrHotItem[i].split('|')[1]+'</td>';
                           
                           var txtKey = arrHotItem[i].split('|')[1].replace(str,"<span style='color:red'>"+str+"</span>");    
                            tab+= '<td align="left" >'+txtKey +'</td>';
                        }
                        else
                        {
                          if(arrHotItem.length <= 1)
                          tab+= '<td align="left"  style="color:#FF0000" >当前城市及地区暂无酒店...</td>';
                        }
                        
                    }
                    tab+= '  </tr>';
                    count++;
                    if(count > 20)
                        break;
                }
            }
        }
        else
        {

            for(i=0; i <= arrAllItem.length-1; i++)
            {
                if(arrAllItem[i].indexOf(str) > -1)
                {
                    tab+= '  <tr id="trIterm'+count+'" name="'+arrAllItem[i]+'"';
                    tab+='  onMouseOver="SetChangesIterm('+count+')"';
                    tab+=' onClick="SetItemValue()"'+' align="center" style="cursor:hand" bgColor="#ffffff">';
                    
                    if(tbObjId.indexOf("quchenghb") > -1)
                    {
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[3]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[1]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[4]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[8]+'</td>';
                    }
                    else if(tbObjId.indexOf("pinpai") > -1)  //品牌拼音|品牌|车型|车座|师傅|电话|车号
                    {
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[1]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[2]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[3]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[4]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[5]+'</td>';
                        tab+= '<td align="left" >'+arrAllItem[i].split('|')[6]+'</td>';
                    }
                    else
                    {
                       // tab+= '<td align="left" >'+arrAllItem[i].split('|')[1]+'</td>';
                        var txtKey = arrAllItem[i].split('|')[1].replace(str,"<span style='color:red'>"+str+"</span>");    
                            tab+= '<td align="left" >'+txtKey +'</td>';
                    }
                    tab+= '  </tr>';
                    count++;
                    if(count > 20) { break; }
                }
            }
        }
        tab+= '    </table>';
        tab+= '   </td>';
        tab+= '  </tr>';
        tab+= '</table>';

        document.getElementById("divItem").innerHTML=tab;
        focusId=0;
        document.getElementById("divItem").style.visibility="visible";
    }
    SetFocusIterm(str,isqingkong);
}

function SetFocusIterm(str,isqingkong)
{
    var KeyCode=parseInt(event.keyCode);
    var RowsCount=document.getElementById("tbl_Iterms")!=null?document.getElementById("tbl_Iterms").rows.length:0;
    var newfocusId=0;
 
    //按Esc键
    if(KeyCode==27)
    {    ObjPrintItem.value="";
        
        document.getElementById("divItem").style.visibility="hidden"; 
        return false;
    }
    //按Enter键或者Tab键
    if(KeyCode==13)
        SetItemValue();
　　//按↑键或者↓键
    if(KeyCode==38 || KeyCode==40)
    {
        if(KeyCode==38)
            newfocusId=focusId>0?focusId-1:0;
        if(KeyCode==40)
            newfocusId=RowsCount>focusId+1?focusId+1:RowsCount-1;
    }
    if(RowsCount>0)
    {
        SetChangesIterm(newfocusId);
    }
    else
    {
        document.getElementById("td_Title").innerHTML="对不起,找不到：" +"<font color='red'>"+str+"</font>"; //+str
        if(isqingkong==null)
        {
            ObjPrintItem.onblur=function()
            {
                if(document.getElementById("td_Title").innerHTML.indexOf("找不到") > -1)
                {
                    ObjPrintItem.value = "";
                    var id = ObjPrintItem.name + "_id";
                    if(document.getElementById(id))    document.getElementById(id).value="";
                    var ref1 = ObjPrintItem.name + "_ref1";
                    if(document.getElementById(ref1))  document.getElementById(ref1).value="";
                    var ref2 = ObjPrintItem.name + "_ref2";
                    if(document.getElementById(ref2))  document.getElementById(ref2).value="";
                    var ref3 = ObjPrintItem.name + "_ref3";
                    if(document.getElementById(ref3))  document.getElementById(ref3).value="";
                    var ref4 = ObjPrintItem.name + "_ref4";
                    if(document.getElementById(ref4))  document.getElementById(ref4).value="";
                    var ref5 = ObjPrintItem.name + "_ref5";
                    if(document.getElementById(ref5))  document.getElementById(ref5).value="";
                    var ref6 = ObjPrintItem.name + "_ref6";
                    if(document.getElementById(ref6))  document.getElementById(ref6).value="";
                    if(ObjPrintItem.name == "travel_name")
                    {
                        ResetValue('travel_lxr');ResetValue('travel_lxr_id');ResetValue('travel_lxr_ref1');ResetValue('travel_lxr_ref2');
                    }
                    if(ObjPrintItem.name.indexOf("hotel") > -1)
                    {
                        var nam = ObjPrintItem.name.replace("hotel","room");
                        var naid = nam+"_id";
                        ResetValue(nam);ResetValue(naid);
                    }
                    document.getElementById("divItem").style.visibility="hidden";
                }
            }
        }
    }
}

//选择
function SetItemValue()
{
    try
    {
        if(document.getElementById("divItem").style.visibility!="hidden")
        {
          if(document.getElementById("trIterm"+focusId).name != "")
          {
            ObjPrintItem.value=document.getElementById("trIterm"+focusId).name.split('|')[1];
            document.getElementById("divItem").style.visibility="hidden";                      
                var id = ObjPrintItem.name + "_id";
                if(document.getElementById(id))
                    document.getElementById(id).value=document.getElementById("trIterm"+focusId).name.split('|')[2];
                var ref1 = ObjPrintItem.name + "_ref1";
                if(document.getElementById(ref1))
                    document.getElementById(ref1).value=document.getElementById("trIterm"+focusId).name.split('|')[3];
                var ref2 = ObjPrintItem.name + "_ref2";
                if(document.getElementById(ref2))
                    document.getElementById(ref2).value=document.getElementById("trIterm"+focusId).name.split('|')[4];
                var ref3 = ObjPrintItem.name + "_ref3";
                if(document.getElementById(ref3))
                    document.getElementById(ref3).value=document.getElementById("trIterm"+focusId).name.split('|')[5];
                var ref4 = ObjPrintItem.name + "_ref4";
                if(document.getElementById(ref4))
                    document.getElementById(ref4).value=document.getElementById("trIterm"+focusId).name.split('|')[6];
                var ref5 = ObjPrintItem.name + "_ref5";
                if(document.getElementById(ref5))
                    document.getElementById(ref5).value=document.getElementById("trIterm"+focusId).name.split('|')[7];
                var ref6 = ObjPrintItem.name + "_ref6";
                if(document.getElementById(ref6))
                    document.getElementById(ref6).value=document.getElementById("trIterm"+focusId).name.split('|')[8];        
            }
        }
    }
    catch(ex)
    {
    };
}

//移动
function SetChangesIterm(newfocusId)
{
    try
    {
        document.getElementById("trIterm"+focusId).bgColor="#ffffff";
        document.getElementById("trIterm"+newfocusId).bgColor="#D0D3FF";
        focusId=newfocusId;
    }
    catch(ex)
    {
    }
}

document.onclick=function()   //任意点击时关闭下拉列表
{
    with(window.event)
    {
        if (srcElement != ObjPrintItem)
            document.getElementById("divItem").style.visibility="hidden";
    }
}


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Fooo/p/1630722.html