input搜索框实时检索功能实现（超简单，核心原理请看思路即可）

问题：实现input搜索框实时检索的功能，类似哔哩哔哩首页搜索功能（壮哉我大b站！）。公司要求，emmmm没办法，果然懒人是要被赶着走才会进步的说，诶嘿O(∩_∩)O。

解决方法：

    1.参考资料：http://www.jb51.net/article/111408.htm 基础思路

                        http://blog.sina.com.cn/s/blog_69ec42d50102wqok.html 进阶思路

    2.效果图：

    3.思路：

            一：目前监听input输入框有三种方法：

                一种是onchange事件，触发条件：内容改变且失去焦点。

                一种是onpropertychange事件，触发条件：元素内容改变即触发，另外js改变内容，该元素的属性改变也会触发。但只在IE11以下支持。

                一种是html5的oninput事件，触发条件：value值的改变，但是js方式改变value不会触发，且在IE8以上及其他标准浏览器支持。

            二：采用最简单的html5的oninput事件，onchange事件触发条件无法达到理想的输入即检索，onpropertychange对浏览器的支持力度太低。

             三：由于oninput事件是输入即触发，这会导致出现输入汉字时出发次数过多，即使在拼写的时候也会触发，影响用户体验和后台交互，所以利用compositionstart和compositionend来处理。

              原理：

                  当浏览器有非直接的文字输入时，compositionstart事件就会同步触发，记住，是同步

                  当浏览器是直接的文字输入时，compositionend事件就会触发

              所以：

  1. var cpLock = false;
  2.     $('input[search]').on('compositionstart', function () {
  3.         // 输入汉语拼音时锁住搜索框，不进行搜索，或者从汉语拼音转到字母时也可触发
  4.         cpLock = true;
  5.         console.log('不搜索')
  6.     });
  7.     $('input[search]').on('compositionend', function () {
  8.         // 结束汉语拼音输入并生成汉字时，解锁搜索框，进行搜索
  9.         cpLock = false;
  10.         console.log('汉字搜索');
  11.         // 接下去放ajax请求生成下拉框内容
  12.     });
  13.     $('input[search]').on('input', function () {
  14.         if (!cpLock) {
  15.             console.log('字母搜索')    
  16.           // 接下去放ajax请求生成下拉框内容
  17.       }
  18.   });

    4.代码:（我知道大家都和我一样懒的，嗯~ o(*￣▽￣*)o，不要脸地这么认为了，嘿嘿，下面代码是我稍微改了某大神的代码弄的demo，对不起大神，真的不是故意不加名字链接的，主要是开的页面太多关了不知道是哪个，加上自己懒）

    demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模糊查询</title>
  6.     <script src="../../../js/jquery-1.8.2.js"></script>
  7.     <style>
  8.         *{
  9.             list-style: none;
  10.             padding:0;
  11.             margin:0;
  12.         }
  13.         div{
  14.             text-align: center;
  15.             padding-top:20px;
  16.         }
  17.         ul{
  18.             padding-top:20px;
  19.             width:30%;
  20.             margin:0 50% 0 35%;
  21.         }
  22.         li{
  23.             padding:3px;
  24.             border:1px solid silver;
  25.             box-shadow: 1px 1px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div>
  31.     <input type="text" id="txt">
  32.     <button type="button" id="btn">search</button>
  33.     <ul id="list">
  34.  
  35.     </ul>
  36. </div>
  37. <script>
  38.     /**
  39.      * Created by Steven on 2016-10-25.
  40.      */
  41.     var oTxt = document.getElementById('txt');
  42.     var oBtn = document.getElementById('btn');
  43.     var oList = document.getElementById('list');
  44.  
  45.     var fruits = ["桃子","苹果","梨子","香蕉","香瓜","葡萄","柠檬","橘子","草莓","草莓子","草拟吗","s","ssr"];
  46.     //点击事件
  47.     oBtn.addEventListener('click', function(){
  48.         var keyWord = oTxt.value;
  49.         // var fruitList = searchByIndexOf(keyWord,fruits);
  50.         console.log(fruitList);
  51.         var fruitList = searchByRegExp(keyWord, fruits);
  52.         renderFruits(fruitList);
  53.     }, false);
  54.     //回车查询
  55.     oTxt.addEventListener('keydown', function(e){
  56.         if(e.keyCode == 13){
  57.             var keyWord = oTxt.value;
  58.             // var fruitList = searchByIndexOf(keyWord,fruits);
  59.             var fruitList = searchByRegExp(keyWord, fruits);
  60.             renderFruits(fruitList);
  61.         }
  62.     }, false);
  63.     var cpLock = false;
  64.     $('#txt').on('compositionstart', function () {
  65.         cpLock = true;
  66.         console.log("不搜索")
  67.     });
  68.     $('#txt').on('compositionend', function () {
  69.         cpLock = false;
  70.         console.log("汉字搜索");
  71.         var keyWord = oTxt.value;
  72.         // var fruitList = searchByIndexOf(keyWord,fruits);
  73.         var fruitList = searchByRegExp(keyWord, fruits);
  74.         renderFruits(fruitList);
  75.     });
  76.     $('#txt').on('input', function () {
  77.         if (!cpLock) {
  78.             console.log("字母搜索")
  79.             var keyWord = oTxt.value;
  80.             // var fruitList = searchByIndexOf(keyWord,fruits);
  81.             var fruitList = searchByRegExp(keyWord, fruits);
  82.             renderFruits(fruitList);
  83.         }
  84.     });
  85.     function renderFruits(list){
  86.         if(!(list instanceof Array)){
  87.             return ;
  88.         }
  89.         oList.innerHTML = '';
  90.         var len = list.length;
  91.         var item = null;
  92.         for(var i=0;i<len;i++){
  93.             item = document.createElement('li');
  94.             item.innerHTML = list[i];
  95.             oList.appendChild(item);
  96.         }
  97.     }
  98.     //模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。
  99.  
  100.     //模糊查询1:利用字符串的indexOf方法
  101.     function searchByIndexOf(keyWord, list){
  102.         if(!(list instanceof Array)){
  103.             return ;
  104.         }
  105.         var len = list.length;
  106.         var arr = [];
  107.         for(var i=0;i<len;i++){
  108.             //如果字符串中不包含目标字符会返回-1
  109.             if(list[i].indexOf(keyWord)>=0){
  110.                 arr.push(list[i]);
  111.             }
  112.         }
  113.         return arr;
  114.     }
  115.     //正则匹配
  116.     function searchByRegExp(keyWord, list){
  117.         if(!(list instanceof Array)){
  118.             return ;
  119.         }
  120.         var len = list.length;
  121.         var arr = [];
  122.         var reg = new RegExp(keyWord);
  123.         for(var i=0;i<len;i++){
  124.             //如果字符串中不包含目标字符会返回-1
  125.             if(list[i].match(reg)){
  126.                 arr.push(list[i]);
  127.             }
  128.         }
  129.         return arr;
  130.     }
  131.     renderFruits(fruits);
  132. </script>
  133. </body>
  134. </html>

原文地址：https://blog.csdn.net/qq_39974331/article/details/80410032
posted @ 2019-10-09 15:35  星朝  阅读(4967)  评论(0)  编辑  收藏  举报