1.  <!DOCTYPE HTML>
  2.  <html>
  3.     <head>
  4.        <meta charset = "utf-8">
  5.        <title>JS实现联想自动补齐功能</title>
  6.        <style>
  7.           * { box-sizing: border-box; }
  8.           #container{
  9.  
  10.              position:relative;
  11.              top:50px;
  12.              left:30%;
  13.            /*为了好看一点定个位*/
  14.  
  15.          }
  16.          form{
  17.               padding:6px;
  18.               position:absolute;
  19.               top:200px;
  20.               left:50px;
  21.         }
  22.          #search{
  23.           border: 1px solid transparent;
  24.           background-color: #f1f1f1;
  25.           padding: 10px;
  26.           font-size: 16px;
  27.        }
  28.          button{
  29.              background-color: DodgerBlue;
  30.              color: #fff;
  31.              width:60px;
  32.              height:40px;
  33.              padding:10px;
  34.        }
  35.         //好了虽然丑了点，更能还是有了
  36.       .listclass {
  37.           position: absolute;
  38.           border: 1px solid #d4d4d4;
  39.           border-bottom: none;
  40.           border-top: none;
  41.           z-index: 99;
  42.  
  43.           top: 100%;
  44.           left: 0;
  45.           right: 0;
  46.         }
  47.        .listclass div {
  48.            padding: 10px;
  49.            cursor: pointer;
  50.            background-color: #fff;
  51.            border-bottom: 1px solid #d4d4d4;
  52.         }
  53.           .listclass div:hover {
  54.  
  55.            background-color: #e9e9e9;
  56.        }
  57.         .listactive {
  58.  
  59.             background-color: DodgerBlue !important;
  60.             color: #ffffff;
  61.        }
  62.        </style>
  63.     </head>
  64.     <body>
  65.       <div id="container">
  66.       <h3>HTML5的表单是有自动不全功能的，（所以可以只做输入和数据对比过滤就可以）<h3>
  67.       <h3>这里我们先把补齐更能关闭了用autocomplete属性来实现</h3>
  68.       <form autocomplete="off" action="https://www.baidu.com/s?"  id>
  69.  
  70.            <div  >
  71.                  <input id="search" name="search" placeholder="输入国家或者地区的英文名">
  72.                  <button type="submit" >提交</button>
  73.            </div>
  74.  
  75.       </form>
  76.       </div>
  77.       <script>
  78.          //筛选函数
  79.          function search(arr){
  80.           //将数据传入，预处理一下
  81.  
  82.           var currentFocus;//用来计算输入几个
  83.           var inp=document.getElementById("search");
  84.           //当输入时，开始筛选,注册一个输入
  85.           inp.addEventListener("input",function(event){
  86.            var a,b,i,val=this.value;
  87.            //当失去焦点后关闭下拉列表
  88.            closeAll();
  89.            if(!val){return false;}
  90.            currentFocus=-1;
  91.            //把数据例表搞出来
  92.            a=document.createElement("div");
  93.            a.setAttribute("id",this.id+"list");
  94.            a.setAttribute("class","listclass");
  95.            //添加这个div
  96.            inp.parentNode.appendChild(a);
  97.            //开始循环匹配数据
  98.            for(i=0;i<arr.length;i++){
  99.              //这个只能顺序匹配，匹配第一个后第二个有效继续，无效为空，
  100.              if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
  101.                b = document.createElement("div");
  102.                b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
  103.                b.innerHTML += arr[i].substr(val.length);
  104.                b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
  105.                b.addEventListener("click", function(e) {
  106.  
  107.                inp.value = this.getElementsByTagName("input")[0].value;
  108.                console.log(this)
  109.                closeAll();
  110.            });
  111.           a.appendChild(b);
  112.      }
  113.    }
  114.  });
  115.       //按键按下时将数据放到输入框
  116.         inp.addEventListener("keydown", function(e) {
  117.            var x = document.getElementById(this.id + "list");
  118.            if (x) x = x.getElementsByTagName("div");
  119.            if (e.keyCode == 40) {
  120.            currentFocus++;
  121.            addActive(x);
  122.        } else if (e.keyCode == 38) {
  123.           currentFocus--;
  124.           addActive(x);
  125.        } else if (e.keyCode == 13) {
  126.           e.preventDefault();
  127.          if (currentFocus > -1) {
  128.  
  129.            if (x) x[currentFocus].click();
  130.          }
  131.        }
  132.    });
  133.        function addActive(x) {
  134.  
  135.      if (!x) return false;
  136.  
  137.      removeActive(x);
  138.      if (currentFocus >= x.length) currentFocus = 0;
  139.      if (currentFocus < 0) currentFocus = (x.length - 1);
  140.  
  141.      x[currentFocus].classList.add("listactive");
  142.    }
  143.  //输入框删除已经输入的字符，往后匹配
  144.    function removeActive(x) {
  145.  
  146.      for (var i = 0; i < x.length; i++) {
  147.        x[i].classList.remove("listactive");
  148.      }
  149.    }
  150.   //失去焦点就关闭列表
  151.    function closeAll(elmnt) {
  152.      //全部删去
  153.      var x = document.getElementsByClassName("listclass");
  154.      for (var i = 0; i < x.length; i++) {
  155.        if (elmnt != x[i] && elmnt != inp) {
  156.          x[i].parentNode.removeChild(x[i]);
  157.        }
  158.      }
  159.    }
  160.    //点击列表外也删除
  161.    document.addEventListener("click", function (e) {
  162.        closeAll(e.target);
  163.        });  
  164.  
  165.        }
  166.  
  167.  //数据
  168.   var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & 
  169.  
  170.  Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bang
  171.  
  172.  ladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & 
  173.  
  174.  Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina 
  175.  
  176.  Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican 
  177.  
  178.  Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D 
  179.  
  180.  Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech 
  181.  
  182.  Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El 
  183.  
  184.  Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe 
  185.  
  186.  Islands","Fiji","Finland","France","French Polynesia","French West 
  187.  
  188.  Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Gu
  189.  
  190.  am","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong 
  191.  
  192.  China","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of 
  193.  
  194.  Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo",
  195.  
  196.  "Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithua
  197.  
  198.  nia","Luxembourg","Macau 
  199.  
  200.  China","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall 
  201.  
  202.  Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro",
  203.  
  204.  "Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands 
  205.  
  206.  Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North 
  207.  
  208.  Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New 
  209.  
  210.  Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto 
  211.  
  212.  Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San 
  213.  
  214.  Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra 
  215.  
  216.  Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South 
  217.  
  218.  Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St 
  219.  
  220.  Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan 
  221.  
  222.  China","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & 
  223.  
  224.  Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab 
  225.  
  226.  Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican 
  227.  
  228.  City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
  229.  
  230.  /*运行一下函数*/
  231.  search(countries);
  232.       </script>
  233.     </body>
  234.  </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. codeforces 357C Knight Tournament(set)

    Description Hooray! Berl II, the king of Berland is making a knight tournament. The king has already ...

  2. Eight hdu 1043 poj 1077

    Description The 15-puzzle has been around for over 100 years; even if you don't know it by that name ...

  3. 如何修改Web.Config里面的值

    0.先添加 <add key="MAXNUM" value="6" /> 1.读取值 string maxNum = ConfigurationMa ...

  4. GPU-directX的发展历史

    GPU发展历史: GPU之前的基础: 1962 麻省理工学院的博士伊凡•苏泽兰发表的论文以及他的画板程序奠定了计算机图形学的基础. 1962-1984 没有专门图形处理硬件,由CPU完成 1984 专 ...

  5. 【RHEL7/CentOS7基本配置】

    目录 @ 相比于6.x的版本,Rhel7/CentOS7增加或改进了以下7大特性. 1.身份管理 kerberos的跨平台信任机制:kerberos将完全兼容微软活动目录,实现完全使用活动目录进行认证 ...

  6. java中锁的理解

    在并发编程中,经常遇到多个线程访问同一个 共享资源 ,这时候作为开发者必须考虑如何维护数据一致性,在java中synchronized关键字被常用于维护数据一致性.synchronized机制是给共享 ...

  7. Reference Counting GC (Part one)

    目录 引用计数法 计数器值的增减 new_obj()和update_ptr()函数 new_obj()生成对象 update_ptr()更新指针ptr,对计数器进行增减 优点 可即可回收垃圾 最大暂停 ...

  8. Windows server 2016 解决“无法完成域加入，原因是试图加入的域的SID与本计算机的SID相同。”

    使用克隆的系统时,加域是出现如下问题.“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同.” 问题原因:Windows使用SID来表示所有的安全对象(security principa ...

  9. Greenplum中定义数据库对象之创建与管理模式

    创建与管理模式 概述:DB内组织对象的一种逻辑结构.一个DB内能够有多个模式.在未指定模式时默认放置在public中.能够通过"\dn"方式查看数据库中现有模式. testdw=# ...

  10. HTTP -- 请求/响应 结构

    一:一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据. 1.请求行 1.请求方法:GET POST 2.URL字段 3.HTTP版本字段 2.请求头 1.Accept:浏览器可接受 ...