欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全

 更新時(shí)間：2016年01月07日 16:11:28   投稿：lijiao  
這篇文章主要介紹了javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下

本文實(shí)例講解了javascript輸入框自動(dòng)下拉補(bǔ)全操作，仿百度、谷歌搜索框提示，具體內(nèi)容如下

效果圖：

具體代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  /*自動(dòng)下拉補(bǔ)全 zhk */
  var highlightindex=-1;//當(dāng)前高亮的節(jié)點(diǎn)
 $(document).ready(function(){
 var wordInput=$("#word");
 var wordInputOffset=wordInput.offset();
 
  $("#auto").hide().css("border","1px black solid").css("position","absolute")
  .css("top",wordInputOffset.top+wordInput.height()+5+"px")
  .css("left",wordInputOffset.left+"px").width(wordInput.width()+2);
 
 wordInput.keyup(function (event){
 
  var myEvent=event||window.event;
  var keyCode=myEvent.keyCode;
  if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
 
   var wordText=$("#word").val();
   var autoNode=$("#auto");
   if(wordText!=""){
   
    
    var wordNodes=$("span");
    
    autoNode.html("");
    wordNodes.each(function(i){
     var wordNode=$(this);
     var newDivNode=$("<div>").attr("id",i);
      
     newDivNode.html(wordNode.text()).appendTo(autoNode);
     newDivNode.mouseover(function(){//鼠標(biāo)進(jìn)入
      if(highlightindex!=-1){
        $("#auto").children("div").eq(highlightindex)
        .css("background-color","white");
       }
       highlightindex=$(this).attr("id");
       $(this).css("background-color","red");
      })
 
      newDivNode.mouseout(function(){//鼠標(biāo)移除
       $(this).css("background-color","white");
      
       })
newDivNode.click(function(){//點(diǎn)擊
       var comText=$(this).text();
       $("#auto").hide();
     highlightindex=-1;
     $("#word").val(comText);
       })
 
    })
    if(wordNodes.length>0){
     autoNode.show();
    }else{
     autoNode.hide();
     highlightindex=-1;
     }
   
   }else{
   autoNode.hide();
    highlightindex=-1;
    }
 
   }else if(keyCode==38||keyCode==40){
     if(keyCode==38){//向上
      var autoNodes=$("#auto").children("div");
       if(highlightindex!=-1){
        autoNodes.eq(highlightindex).css("background-color","white");
         highlightindex--;
       }else{
        highlightindex=autoNodes.length-1;
       }
       
       if(highlightindex==-1){
        highlightindex=autoNodes.length-1;
       }
       autoNodes.eq(highlightindex).css("background-color","red");
     }
     if(keyCode==40){
      var autoNodes=$("#auto").children("div");
       if(highlightindex!=-1){
        autoNodes.eq(highlightindex).css("background-color","white");
       }
       highlightindex++;
       if(highlightindex==autoNodes.length){
        highlightindex=0;
       }
       autoNodes.eq(highlightindex).css("background-color","red");
     }
   }else if(keyCode==13){
     
    if(highlightindex!=-1){
     var comText=$("#auto").hide().children("div").eq(highlightindex).text();
     highlightindex=-1;
     $("#word").val(comText);
     }else{
      alert("文本框中的【"+$("#word").val()+"】被提交了");
      $("#auto").hide();
       $("#word").get(0).blur();//失去焦點(diǎn)
     }
    }
  });
 
  $("input [type='button']").click(function(){
   alert("文本框中的【"+$("#word").val()+"】被提交了");
  });
 
 
})
</script>
 </HEAD>
 
 <BODY>
 <input type="text" id="word">
<input type="button" value="提交">
<div id="auto"></div>
<p>
<span>aaa</span>
<span>abc</span>
<span>abd</span>
<span>bbc</span>
<span>beb</span>
<span>cer</span>
<span>erd</span>
<span>beg</span>
<p>
 </BODY>
</HTML>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • LazyLoad 延遲加載(按需加載)

    LazyLoad 延遲加載(按需加載)

    大型網(wǎng)站往往很矛盾，想用戶在首頁(yè)看到更多東西，又不想浪費(fèi)太多服務(wù)器流量。比如一個(gè)有3屏的首頁(yè)。可能50%的用戶進(jìn)首頁(yè)的目的是點(diǎn)擊首頁(yè)的連接，到子頁(yè)面。
    2010-05-05
  • JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果

    JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果

    本文通過(guò)實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果，本文附有圖片和示例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2017-11-11
  • 如何利用echarts畫(huà)雷達(dá)圖和折柱混合

    如何利用echarts畫(huà)雷達(dá)圖和折柱混合

    最近使用echarts做的一個(gè)H5的成績(jī)數(shù)據(jù)報(bào)告,里面使用了雷達(dá)圖已經(jīng)折線圖和柱狀圖,下面這篇文章主要給大家介紹了關(guān)于如何利用echarts畫(huà)雷達(dá)圖和折柱混合的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Javascript中Object和Map之間的轉(zhuǎn)換方法

    Javascript中Object和Map之間的轉(zhuǎn)換方法

    在許多編程語(yǔ)言中,Object和Map都是用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 20條學(xué)習(xí)javascript的編程規(guī)范的建議

    20條學(xué)習(xí)javascript的編程規(guī)范的建議

    本文總結(jié)了20條javascript的編程規(guī)范，都是平時(shí)項(xiàng)目中使用的時(shí)候需要注意的地方，這里推薦給大家，如對(duì)大家有所幫助，那便是極好的了。
    2014-11-11
  • 三分鐘帶你快速學(xué)會(huì)微信小程序的條件渲染

    三分鐘帶你快速學(xué)會(huì)微信小程序的條件渲染

    所謂的條件渲染就是判斷是否需要把代碼渲染到展示頁(yè)面上,下面這篇文章主要給大家介紹了關(guān)于微信小程序條件渲染的相關(guān)資料,文中通過(guò)實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 20個(gè)你不得不知道的JS async/await實(shí)用技巧

    20個(gè)你不得不知道的JS async/await實(shí)用技巧

    JavaScript的async和await關(guān)鍵詞是現(xiàn)代JavaScript異步編程的核心,它們讓異步代碼看起來(lái)和同步代碼幾乎一樣,使得異步編程變得更加直觀和易于管理,本文介紹20個(gè)關(guān)于async/await的實(shí)用技巧,將大大提升編程效率和代碼的清晰度,需要的朋友可以參考下
    2023-12-12
  • JS實(shí)現(xiàn)的車(chē)標(biāo)圖片提示效果代碼

    JS實(shí)現(xiàn)的車(chē)標(biāo)圖片提示效果代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)的車(chē)標(biāo)圖片提示效果代碼,涉及JavaScript鼠標(biāo)事件觸發(fā)頁(yè)面元素遍歷修改的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • JS+HTML5 FileReader對(duì)象用法示例

    JS+HTML5 FileReader對(duì)象用法示例

    這篇文章主要介紹了JS+HTML5 FileReader對(duì)象用法,結(jié)合具體實(shí)例形式分析了FileReader對(duì)象的常用方法及簡(jiǎn)單使用技巧,需要的朋友可以參考下
    2017-04-04
  • JS識(shí)別瀏覽器類(lèi)型(電腦瀏覽器和手機(jī)瀏覽器)

    JS識(shí)別瀏覽器類(lèi)型(電腦瀏覽器和手機(jī)瀏覽器)

    本文給大家分享一段js代碼關(guān)于識(shí)別瀏覽器的類(lèi)型是手機(jī)瀏覽器還是電腦瀏覽器，有需要的朋友可以參考下本文
    2016-11-11

最新評(píng)論