input 搜索 实时搜索
2024-04-22 03:51:50
<div class="sadsffd dropdown" id="search" onclick="search.changeValue(this);search.searchKeyword()"><input type="text" class="dropdown-selected inping" id="search-input" placeholder="请输入关键字" onkeyup="search.searchKeyword();" autocomplete="off"><ul class="option"><li><a href="javaScript:" value="1">1111</a></li><li><a href="javaScript:" value="1">2</a></li><li><a href="javaScript:" value="1">33</a></li><li><a href="javaScript:" value="1">44</a></li></ul></div><style>.dropdown {position: relative;display: inline-block;width: 300px;padding-left: 10px;}.dropdown-selected {width: 100% !important;height: 30px;line-height: 30px;border: 1px solid #c6c8cc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color: #333;text-indent: 10px;margin-bottom: 0 !important;}.dropdown ul {padding: 0;width: 97%;max-height: 200px;overflow-y: auto;background-color: #fff;margin-top: 2px;border: 1px solid #c6c8cc;position: absolute;display: none;z-index: 2;}.dropdown ul li {list-style: none;text-indent: 10px;}.dropdown ul li a {display: block;color: #282c33;text-decoration: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.dropdown ul li:hover {background-color: #f2f6fa;}.dropdown ul li a:active,.dropdown ul li.active a {background-color: #e4e9f2;}</style><script>var search = {searchKeyword: function() {var nWord = $("#search-input").val();//var temarray = nWord.split(""); //分割var array = this.unique(nWord.split(""));var dsa = $("#search").find("ul li a"); //获取全部列表var linumber = 0;$("#search ul li").show();for (var t = 0; t < dsa.length; t++) {$(dsa[t]).html($(dsa[t]).text());var temstr = ($(dsa[t]).text()).split("");var yes = false;for (var i = 0; i < array.length; i++) {var posarr = this.findAll(temstr, array[i]);if (posarr.length > 0) {yes = true;for (var j = 0; j < posarr.length; j++) {temstr[posarr[j]] = "<em style='color:red;'>" + temstr[posarr[j]] + "</em>";}}}if (!yes) {$(dsa[t]).closest("li").hide();} else {linumber++;var htmlstr = "";for (var m = 0; m < temstr.length; m++) {htmlstr += temstr[m];}$(dsa[t]).html(htmlstr);}}if (linumber == 0) {$("#search ul li").show();$("#search ul").slideDown(200);}},findAll: function(arr, str) {var results = [],len = arr.length,pos = 0;while (pos < len) {pos = arr.indexOf(str, pos);if (pos === -1) {break;}results.push(pos);pos++;}return results;},unique: function(arr) {var new_arr = [];for (var i = 0; i < arr.length; i++) {var items = arr[i];//判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后if ($.inArray(items, new_arr) == -1) {new_arr.push(items);}}return new_arr;},changeValue: function(obj) {$('.dropdown ul').slideUp(200);var input = $(obj).find('.dropdown-selected');var ul = $(obj).find('ul');if (!ul.is(':visible')) {ul.slideDown('fast');} else {ul.slideUp('fast');}$(obj).find('ul a').click(function() {input.val($(this).text());$(this).parent().addClass('active');$(this).parent().siblings().removeClass('active')$(this).closest('ul').slideUp(200);return false;})var e = this.getEvent();window.event ? e.cancelBubble = true : e.stopPropagation();},_init: function() {$("#search").on("click", "ul li a", function() {$("#search-input").val($(this).text());$(this).parent().addClass('active');$(this).parent().siblings().removeClass('active')$(this).closest('ul').slideUp(200);return false;})},getEvent: function() {if (window.event) {return window.event;}var f = arguments.callee.caller;do {var e = f.arguments[0];if (e && (e.constructor === Event || e.constructor === MouseEvent || e.constructor === KeyboardEvent)) {return e;}} while (f = f.caller);}}search._init();</script>input 搜索 实时搜索相关推荐
- input输入框实时搜索匹配
实时搜索功能 最终效果如下:当是英文输入或数字时,每次输入都会触发,但当是中文输入法时,只有在选中文字后才会触发,类似百度搜索 (以react为例) <input value={searchVa ...
- 基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
- 输入框实时搜索优化，减少请求次数、取消无用请求
背景 用户在输入框输入内容的同时进行搜索,针对搜索实时搜索结果进行展示 问题 如果不做处理,只监听输入框的input事件或者键盘按下弹起事件,实时对文本内容进行搜索,往往因为网络波动问题可能会造成结果 ...
- vue中实现input实时搜索
实现效果 html <el-input v-model="listQuery.tQuery" @input="searchEvent" clearable ...
- 微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题 微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
- ELK学习1_开源分布式搜索平台ELK+Redis+Syslog-ng实现日志实时搜索
Logstash + Elasticsearch + Kibana+Redis+Syslog-ng ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于 ...
- 开源分布式搜索平台ELK+Redis+Syslog-ng实现日志实时搜索
转载:http://my.oschina.net/HeAlvin/blog/378257 目录[-] 安装JDK 安装redis 安装Elasticsearch 安装logstash 安装kibana ...
- 微信小程序 实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果 一.效果图 二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
- 测试无法测试的几乎苹果api实时搜索示例
First of all let's make it clear about what a live search is. In a short definition, we could say it ...
最新文章
- python有证书考吗-学python需要考证吗？
- POI操作Excel:cell的背景颜色类型
- 2020CCPC(长春) - Ragdoll(启发式合并+带权并查集)
- IDEA 修改 jdk 版本
- Appium探索—Mac OS Python版
- 计算机硬盘容量1t,硬盘1tb等于多少gb 硬盘容量计算公式
- 【数字图像处理】图像感兴趣区域与图像放大与缩小
- 计算机理论什么是信道容量,(信道容量知识总结.doc
- React Native 每日一学(Learn a little every day)
- 51单片机驱动ds12887c语言,DS12887(时钟日历芯片) c语言驱动程序
- Transformer课程 第8课NER案例代码笔记-IOB标记
- android wifi 框架图,android wifi框架
- 华为手机信息不弹屏了为什么_华为微信不弹出新消息提醒 怎么办
- 【Statistics】HYPOTHESIS TEST(SIGNIFICANCE TEST)
- 中兴付，为钱包赋予生命
- 狂神RabbitMQ
- 网站建设完成后为什么百度不收录网站
- netbox怎么用?
- C语言——输出杨辉三角的前n行
- 【项目难点】使用canvas完成电子简历功能