軟件首頁 |  文章首頁
最新更新 軟件分類 設(shè)為首頁 加入收藏 聯(lián)系我們
當(dāng)前位置:首頁文章首頁 IT學(xué)院 Javascript

高仿 google suggest ajax 示例

作者:  來源:  發(fā)布時間:2011-3-15 16:55:30  點擊:

  前段時間想用google suggest在網(wǎng)上找了很多都不盡人意,于是自己花了些時間寫了一個,跟google suggest 基本一樣,后面的約多少結(jié)果非本程序范圍哦。

  需要修改的地方有

  javascript.js

  var url="ajax.asp"; //后臺地址

  var time_delayajax=300; //搜索延遲

  var time_delayupdown=100; //方向鍵延遲

  obj_div.style.top = (xtop + 20) + "px"; //20差不多是輸入框的高度,請根據(jù)實際情況調(diào)整

  ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后臺的值

  dd=d+"

  • 約"+c[1]+"結(jié)果"+c[0]+"
  • ";//****li的顯示

     

      后臺輸出結(jié)果格式必需為'文本1,文本2'..... 'java,2''javascript,11''java示例,22'等

      default.css

      .ajaxsearch {

       width:300px; //提示層的寬度

      }

      首頁index.html

      

      

      

      

      

      

      

      

      

      

     

      

      

     

      

      

      腳本javascript.js

      ///////////////////////////////搜索提示框/////////////////////////////////

      var obj_div; //提示層對象

      var obj_input; //輸入框?qū)ο?

      var main_delay; //判斷值變化延遲對象

      var ajax_delay; //ajax延遲搜索對象

      var updown_delay; //方向鍵延遲對象

      var ajax_xmlhttp; //ajax對象

      var div_word=null; //當(dāng)前提示層對應(yīng)的搜索值

      var li_num=-1; //偽光標(biāo)位置,提示層被選中的li序號,從0開始

      var li_down=-1; //鼠標(biāo)按下提示層的序號

      var value_ed=''; //輸入框延遲前的值

      var value_ing=''; //輸入框當(dāng)前的值

      var value_unexit=''; //搜索過沒有結(jié)果的值開頭

      var updown_run=false; //允許方向鍵上下

      var ajax_run=false; //true為正常進(jìn)程,false停止ajax

      var ajax_run_ing=false; //true正在運行,false空閑

      var input_focus=false; //文本框焦點

      var url='ajax.asp'; //后臺地址**********************************************************

      var time_delayajax=300; //搜索延遲**********************************************************

      var time_delayupdown=100; //方向鍵延遲********************************************************

      

      var $=function(Fun_id){

       return document.getElementById(Fun_id);

      }

      try{

       ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

      }catch(e){

       try{

       ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

       }catch(e){

       try{

       ajax_xmlhttp= new XMLHttpRequest();

       }catch(e){ajax_xmlhttp=null;}

       }

      }

      ////////////////////////創(chuàng)建提示層////////////////////////

      function createajaxdiv(){

       var create_div = document.createElement('div');

       create_div.type = 'div';

       var promptdiv = document.body.appendChild(create_div);

       promptdiv.className = 'ajaxsearch';

       obj_div=promptdiv;

      }

      ////////////////////////設(shè)置提示層位置////////////////////////

      function removediv(){

       if(!obj_div || !obj_input)return false;

       if(obj_div.style.display=='none')return false;

       var obj=obj_input;

       var xtop=0;

       var xleft=0;

       while(obj){

       xtop += obj['offsetTop'];

       xleft += obj['offsetLeft'];

       obj = obj.offsetParent;

       }

       obj_div.style.left = xleft + 'px';

       obj_div.style.top = (xtop + 20) + 'px'; //20差不多是輸入框的高度,請根據(jù)實際情況調(diào)整************************************************************8

       li_down=-1;

      }

      ////////////////////////隱藏提示層////////////////////////

      function hideajaxdiv(){

       obj_div.style.display='none';

       li_down=-1;

      }

      ////////////////////////設(shè)置被選

  • css樣式////////////////////////

     

      function setlistyle(){

       for(var i=0;i

       obj_div.firstChild.childNodes[i].id='';

       }

       if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id='liseleted';

      }

      ////////////////////////鼠標(biāo)經(jīng)過提示層////////////////////////

      function overli(Fun_seletedlinum){

       if(li_num==-1)value_ing=obj_input.value;

       li_num=Fun_seletedlinum;

       setlistyle();

      }

      ////////////////////////鼠標(biāo)拖動提示層////////////////////////

      function moveli(){

       if(window.getSelection){

       setfocus();

       window.getSelection().removeAllRanges();

       }else{

       document.selection.empty();

       setfocus();

       }

      }

      ////////////////////////鼠標(biāo)按下提示層////////////////////////

      function downli(Fun_seletedlinum){

       if(!obj_input)return false;

       li_down=Fun_seletedlinum;

       input_focus=true;

      }

      ////////////////////////鼠標(biāo)彈起提示層////////////////////////

      function upli(Fun_seletedlinum,Fun_event){

       if(!obj_input)return false;

       if(Fun_event.button==2){li_down=-1;return}

       if(li_down!=Fun_seletedlinum){

       li_down=-1;

  • 首頁 上一頁 [1] [2] [3]  下一頁 尾頁

    相關(guān)文章

    文章評論

    本類推薦文章

    關(guān)于本站 | 網(wǎng)站幫助 | 廣告合作 | 下載聲明 | 友情連接 | 網(wǎng)站地圖
    Copyright © 20098-2010 uzzf下載站. All Rights Reserved .