<!DOCTYPE HTML>

 <html>

    <head>

       <meta charset = "utf-8">

       <title>JS实现联想自动补齐功能</title>

       <style>

          * { box-sizing: border-box; }

          #container{

             position:relative;

             top:50px;

             left:30%;

           /*为了好看一点定个位*/

         }

         form{

              padding:6px;

              position:absolute;

              top:200px;

              left:50px;

        }

         #search{

          border: 1px solid transparent;

          background-color: #f1f1f1;

          padding: 10px;

          font-size: 16px;

       }

         button{

             background-color: DodgerBlue;

             color: #fff;

             width:60px;

             height:40px;

             padding:10px;

       }

        //好了虽然丑了点，更能还是有了

      .listclass {

          position: absolute;

          border: 1px solid #d4d4d4;

          border-bottom: none;

          border-top: none;

          z-index: 99;

          top: 100%;

          left: 0;

          right: 0;

        }

       .listclass div {

           padding: 10px;

           cursor: pointer;

           background-color: #fff;

           border-bottom: 1px solid #d4d4d4;

        }

          .listclass div:hover {

           background-color: #e9e9e9;

       }

        .listactive {

            background-color: DodgerBlue !important;

            color: #ffffff;

       }

       </style>

    </head>

    <body>

      <div id="container">

      <h3>HTML5的表单是有自动不全功能的，（所以可以只做输入和数据对比过滤就可以）<h3>

      <h3>这里我们先把补齐更能关闭了用autocomplete属性来实现</h3>

      <form autocomplete="off" action="https://www.baidu.com/s?"  id>

           <div  >

                 <input id="search" name="search" placeholder="输入国家或者地区的英文名">

                 <button type="submit" >提交</button>

           </div>

      </form>

      </div>

      <script>

         //筛选函数

         function search(arr){

          //将数据传入，预处理一下

          var currentFocus;//用来计算输入几个

          var inp=document.getElementById("search");

          //当输入时，开始筛选,注册一个输入

          inp.addEventListener("input",function(event){

           var a,b,i,val=this.value;

           //当失去焦点后关闭下拉列表

           closeAll();

           if(!val){return false;}

           currentFocus=-1;

           //把数据例表搞出来

           a=document.createElement("div");

           a.setAttribute("id",this.id+"list");

           a.setAttribute("class","listclass");

           //添加这个div

           inp.parentNode.appendChild(a);

           //开始循环匹配数据

           for(i=0;i<arr.length;i++){

             //这个只能顺序匹配，匹配第一个后第二个有效继续，无效为空，

             if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

               b = document.createElement("div");

               b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";

               b.innerHTML += arr[i].substr(val.length);

               b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";

               b.addEventListener("click", function(e) {

               inp.value = this.getElementsByTagName("input")[0].value;

               console.log(this)

               closeAll();

           });

          a.appendChild(b);

     }

   }

 });

      //按键按下时将数据放到输入框

        inp.addEventListener("keydown", function(e) {

           var x = document.getElementById(this.id + "list");

           if (x) x = x.getElementsByTagName("div");

           if (e.keyCode == 40) {

           currentFocus++;

           addActive(x);

       } else if (e.keyCode == 38) {

          currentFocus--;

          addActive(x);

       } else if (e.keyCode == 13) {

          e.preventDefault();

         if (currentFocus > -1) {

           if (x) x[currentFocus].click();

         }

       }

   });

       function addActive(x) {

     if (!x) return false;

     removeActive(x);

     if (currentFocus >= x.length) currentFocus = 0;

     if (currentFocus < 0) currentFocus = (x.length - 1);

     x[currentFocus].classList.add("listactive");

   }

 //输入框删除已经输入的字符，往后匹配

   function removeActive(x) {

     for (var i = 0; i < x.length; i++) {

       x[i].classList.remove("listactive");

     }

   }

  //失去焦点就关闭列表

   function closeAll(elmnt) {

     //全部删去

     var x = document.getElementsByClassName("listclass");

     for (var i = 0; i < x.length; i++) {

       if (elmnt != x[i] && elmnt != inp) {

         x[i].parentNode.removeChild(x[i]);

       }

     }

   }

   //点击列表外也删除

   document.addEventListener("click", function (e) {

       closeAll(e.target);

       });  

       }

 //数据

  var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & 

 Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bang

 ladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & 

 Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina 

 Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican 

 Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D 

 Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech 

 Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El 

 Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe 

 Islands","Fiji","Finland","France","French Polynesia","French West 

 Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Gu

 am","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong 

 China","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of 

 Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo",

 "Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithua

 nia","Luxembourg","Macau 

 China","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall 

 Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro",

 "Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands 

 Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North 

 Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New 

 Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto 

 Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San 

 Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra 

 Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South 

 Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St 

 Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan 

 China","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & 

 Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab 

 Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican 

 City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

 /*运行一下函数*/

 search(countries);

      </script>

    </body>

 </html>

JS实现联想自动补齐功能的更多相关文章

  1. HTML5的数据自动补齐功能

    使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...

  2. CocoaPods 导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  3. CocoaPods导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  4. CentOS7自动补齐

    cenos7,最小安装,做服务器嘛.但是发现tab键的自动补齐功能没有:其实可以直接把centos7作为yum源,然后直接安装bash-completion  yum install -y bash- ...

  5. Docker笔记7：Docker 命令自动补齐

    经常大家会碰到这种现象,Docker 已经安装好了,但是使用 docker 命令时 不能自动补齐,即输入 docker 命令后,按 Tab 键无法列出子命令(或参数)的候选项. [机制] Linux ...

  6. 为Debian/Ubuntu的apt-get install添加自动补齐/完成功能

    Debian/Ubuntu的apt-get太常用了,不过偶尔可能也会碰到不太熟悉,想不起来的包的名称,除了去debian packages去查找,另外的方法就是给Debian/Ubuntu添加自动补齐 ...

  7. GBin1插件推荐之马可波罗（Marco Polo)，jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

  8. mac下 netbeans 8.02中文版设置代码自动补齐 + eclipse自动补齐

    netbeans自带的自动补齐快捷键是commad+\ 我想要的是在输入的时候,有自动提示,找了半天也没找到怎么搞. 因为我是用的mac系统 后来参考其他的设置,找到了设置的方法,把这个方法记录一下. ...

  9. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

随机推荐

  1. 记录一下 mysql 的查询中like字段的用法

    SELECT * from t_yymp_auth_role where role_name not like '%测试%' and role_name not like '%部门%' and rol ...

  2. datatable设置成中文

    $('#datatable').DataTable({ language: { "sProcessing": "处理中...", "sLengthMe ...

  3. js sort()函数 排序问题 var arr =['A-1-5-1','A-1-10-2','A-1-5-5','B-2-3-1','C-4-10-1'], 对这个数组进行排序，想达到的效果是["A-1-5-1", "A-1-5-5", "A-4-10-1", "A-1-10-2", "A-2-3-1"]

    先介绍个方法 charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. stringObject.charCodeAt(index) ...

  4. BZOJ2115: [Wc2011] Xor(Dfs树，Xor线性无关组)

    Description Input 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si,Ti ,Di,表示 Si 与Ti之间存在 一条权值为 ...

  5. redis练习手册<二>快速入门

    Redis是一个开源,先进的key-value存储,并用于构建高性能,可扩展的Web应用程序的完美解决方案. Redis从它的许多竞争继承来的三个主要特点: Redis数据库完全在内存中,使用磁盘仅用 ...

  6. 使用Linux遇到的一些问题和解决方案

    1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...

  7. java 链接server上的 mongodb 出现 connect time out 问题

    异常信息 十二月 22, 2014 5:27:58 下午 com.mongodb.DBTCPConnector initDirectConnection 警告: Exception executing ...

  8. android图像处理系列之四－－ 给图片添加边框（上）

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  9. storm单机运行与集群运行问题

    使用trident接口时,storm读取kafka数据会将kafka消费记录保存起来,将消费记录的位置保存在tridentTopology.newStream()的第一个参数里, 如果设置成从头开始消 ...

  10. PHP温习之二

    1.php包含的超全局变量 (1)$GLOBALS超全局变量组,在PHP脚本所有的作用域均可以访问到. <?php $x = 23; $y = 17; function addAction(){ ...