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事件就会触发

所以：






var cpLock = false;





    $('input[search]').on('compositionstart', function () {





        // 输入汉语拼音时锁住搜索框，不进行搜索，或者从汉语拼音转到字母时也可触发





        cpLock = true;





        console.log('不搜索')





    });





    $('input[search]').on('compositionend', function () {





        // 结束汉语拼音输入并生成汉字时，解锁搜索框，进行搜索





        cpLock = false;





        console.log('汉字搜索');





        // 接下去放ajax请求生成下拉框内容





    });





    $('input[search]').on('input', function () {





        if (!cpLock) {





            console.log('字母搜索')    





          // 接下去放ajax请求生成下拉框内容





      }





  });

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

demo:






<!DOCTYPE html>





<html lang="en">





<head>





    <meta charset="UTF-8">





    <title>模糊查询</title>





    <script src="../../../js/jquery-1.8.2.js"></script>





    <style>





        *{





            list-style: none;





            padding:0;





            margin:0;





        }





        div{





            text-align: center;





            padding-top:20px;





        }





        ul{





            padding-top:20px;





            width:30%;





            margin:0 50% 0 35%;





        }





        li{





            padding:3px;





            border:1px solid silver;





            box-shadow: 1px 1px;





        }





    </style>





</head>





<body>





<div>





    <input type="text" id="txt">





    <button type="button" id="btn">search</button>





    <ul id="list">





 





    </ul>





</div>





<script>





    /**





     * Created by Steven on 2016-10-25.





     */





    var oTxt = document.getElementById('txt');





    var oBtn = document.getElementById('btn');





    var oList = document.getElementById('list');





 





    var fruits = ["桃子","苹果","梨子","香蕉","香瓜","葡萄","柠檬","橘子","草莓","草莓子","草拟吗","s","ssr"];





    //点击事件





    oBtn.addEventListener('click', function(){





        var keyWord = oTxt.value;





        // var fruitList = searchByIndexOf(keyWord,fruits);





        console.log(fruitList);





        var fruitList = searchByRegExp(keyWord, fruits);





        renderFruits(fruitList);





    }, false);





    //回车查询





    oTxt.addEventListener('keydown', function(e){





        if(e.keyCode == 13){





            var keyWord = oTxt.value;





            // var fruitList = searchByIndexOf(keyWord,fruits);





            var fruitList = searchByRegExp(keyWord, fruits);





            renderFruits(fruitList);





        }





    }, false);





    var cpLock = false;





    $('#txt').on('compositionstart', function () {





        cpLock = true;





        console.log("不搜索")





    });





    $('#txt').on('compositionend', function () {





        cpLock = false;





        console.log("汉字搜索");





        var keyWord = oTxt.value;





        // var fruitList = searchByIndexOf(keyWord,fruits);





        var fruitList = searchByRegExp(keyWord, fruits);





        renderFruits(fruitList);





    });





    $('#txt').on('input', function () {





        if (!cpLock) {





            console.log("字母搜索")





            var keyWord = oTxt.value;





            // var fruitList = searchByIndexOf(keyWord,fruits);





            var fruitList = searchByRegExp(keyWord, fruits);





            renderFruits(fruitList);





        }





    });





    function renderFruits(list){





        if(!(list instanceof Array)){





            return ;





        }





        oList.innerHTML = '';





        var len = list.length;





        var item = null;





        for(var i=0;i<len;i++){





            item = document.createElement('li');





            item.innerHTML = list[i];





            oList.appendChild(item);





        }





    }





    //模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。





 





    //模糊查询1:利用字符串的indexOf方法





    function searchByIndexOf(keyWord, list){





        if(!(list instanceof Array)){





            return ;





        }





        var len = list.length;





        var arr = [];





        for(var i=0;i<len;i++){





            //如果字符串中不包含目标字符会返回-1





            if(list[i].indexOf(keyWord)>=0){





                arr.push(list[i]);





            }





        }





        return arr;





    }





    //正则匹配





    function searchByRegExp(keyWord, list){





        if(!(list instanceof Array)){





            return ;





        }





        var len = list.length;





        var arr = [];





        var reg = new RegExp(keyWord);





        for(var i=0;i<len;i++){





            //如果字符串中不包含目标字符会返回-1





            if(list[i].match(reg)){





                arr.push(list[i]);





            }





        }





        return arr;





    }





    renderFruits(fruits);





</script>





</body>





</html>

原文地址：https://blog.csdn.net/qq_39974331/article/details/80410032

input搜索框实时检索功能实现（超简单，核心原理请看思路即可）的更多相关文章

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
百度地图 Android SDK - 检索功能使用的简单演示样例
百度地图 SDK 不仅为广大开发人员提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发人员提供了多种 LBS 检索的能力. 通过这些接口,开发人员能够轻松的訪问百度的 LBS 数据,丰富自己的移 ...
input搜索框的搜索功能
如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...
【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...
input搜索框：根据历史记录自动填充后，去除默认黄色背景
如果是纯色背景,直接通过box-shadow覆盖即可: input:-webkit-autofill { color: #333!important; -webkit-text-fill-color: ...
element input搜索框探索
转(https://blog.csdn.net/qq_37746973/article/details/78402812) 在script中添加下面两个函数 //queryString 为在框中输入的 ...
设计input搜索框提示文字点击消失的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
微信小程序 —搜索框
wxSearch优雅的微信小程序搜索框一.功能支持自定义热门key 支持搜索历史支持搜索建议支持搜索历史(记录)缓存二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...
通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件这是一个超轻量级插件要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

随机推荐

mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections
mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections 第一种处理方式: ./mysql -u root -p 登录成功后执行以下语句查询当前的 ...
LeetCode 第 3 题：无重复字符的最长子串（滑动窗口）
LeetCode 第 3 题:无重复字符的最长子串 (滑动窗口) 方法:滑动窗口滑动窗口模板问题:右指针先走,满足了一定条件以后,左指针向前走,直到不满足条件. 特点:左右指针的方向是一致的,并且是 ...
servlet3.0无web.xml
大家应该都已经知道spring 3.1对无web.xml式基于代码配置的servlet3.0应用.通过spring的api或是网络上高手们的博文,也一定很快就学会并且加到自己的应用中去了.PS:如果还 ...
20175215 2018-2019-2 第七周java课程学习总结
第八章常用实用类 8.1 String类 Java专门提供了用来处理字符序列的String类.String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使用S ...
spark MLlib 概念 5：余弦相似度（Cosine similarity）
概述: 余弦相似度是对两个向量相似度的描述,表现为两个向量的夹角的余弦值.当方向相同时(调度为0),余弦值为1,标识强相关:当相互垂直时(在线性代数里,两个维度垂直意味着他们相互独立),余弦值为0, ...
vue中limitBy，filterBy，orderBy的用法
1.limitBy的用法 <body> <div id="box"> <ul> <li v-for="val in arr | ...
Link标签
Link标签的属性:rel定义当前文档与目标文档之间的关系. rev定义目标文档与当前文档之间的关系. Link和@import的区别: 1.隶属上的差别 link是一个html的一个标 ...
emqtt 系统主题
$SYS-系统主题 EMQ 消息服务器周期性发布自身运行状态.MQTT 协议统计.客户端上下线状态到 $SYS/ 开头系统主题. $SYS 主题路径以 “$SYS/brokers/{node}/” 开 ...
第五周作业，LVM和TCP
1.磁盘lvm管理,完成下面要求,并写出详细过程: 1) 创建一个至少有两个PV组成的大小为20G的名为testvg的VG;要求PE大小为16MB, 而后在卷组中创建大小为5G的逻辑卷testlv; ...
Pycharm断点调试入门
断点调试是在开发过程中常用的功能,能清楚看到代码运行的过程,有利于代码问题跟踪.对我这个小白开发来说,还有一个作用是快速熟悉代码,拿到别人写的代码,有时看不太懂或看的很吃力,光这样看很无感,但是通过断 ...

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

input搜索框实时检索功能实现（超简单，核心原理请看思路即可）的更多相关文章

随机推荐

热门专题