明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

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

Posted on 2009-12-23 16:12  且行且思  阅读(2099)  评论(0编辑  收藏  举报

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 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";
    }
}