zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    42 最大子数组Ⅱ
    笔试之const问题
    笔试中sizeof求字节数的问题
    40 用栈实现队列
    38 搜索二维矩阵Ⅱ
    25.Remove Nth Node From End of List（删除链表的倒数第n个节点）
    29.最小的K个数
    28.数组中出现次数超过一半的数字
    27.字符串的排列
    26.二叉搜索树与双向链表
  • 原文地址：https://www.cnblogs.com/jpfss/p/11642162.html
Copyright © 2011-2022 走看看