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
  • 相关阅读:
    e621. Activating a Keystroke When Any Child Component Has Focus
    e587. Filling Basic Shapes
    e591. Drawing Simple Text
    e595. Drawing an Image
    e586. Drawing Simple Shapes
    e636. Listening to All Key Events Before Delivery to Focused Component
    在 PL/SQL 块的哪部分可以对初始变量赋予新值? (选择1项)
    Oracle数据库中，在SQL语句中连接字符串的方法是哪个？(选择1项)
    你判断下面语句，有什么作用？(单选)
    Oracle数据库表空间与数据文件的关系描述正确的是( )
  • 原文地址：https://www.cnblogs.com/jpfss/p/11642162.html
Copyright © 2011-2022 走看看