jquery代码实现可输入多关键字搜索下拉框

参考网站：https://www.edoou.com/articles/1552378028436732
https://blog.csdn.net/xuxiaoyinliu/article/details/89166234

首先，先贴一下效果，我比较不喜欢看了半天也不知道你做的是什么效果，如果你要的不是这种效果，就不用接着看了，节省时间。

简单讲就是可以单关键字搜索，也可以多关键字搜索，并且选中的条目加上了selected类。

代码如下：
HTML网页代码

<form action=""><input type="text" name="fruit" autocomplete="off" placeholder="请选择或输入水果名称"><ul class="list"><li>苹果制造机器sna-16a</li><li>苹果制造机器snb-16b</li><li>苹果制造机器snc-17c</li><li>香蕉制造机器snd-17d</li><li>香蕉制造机器snb-19b</li><li>芒果制造机器snc-16c</li></ul></form>

CSS样式代码

 form {width: 220px;margin: 50px auto;padding: 20px;color: #333;}input {width: 220px;padding: 10px 10px;border-radius: 2px;border: 1px solid #ddd;}.list {width: 240px;margin: 2px 0;padding: 0;border: 1px solid #ddd;display: none;}.list li {list-style: none;cursor: pointer;padding: 0 10px;line-height: 30px;}.list li.selected {background: #eee;}

jquery代码

//点击输入框之后，候选列表出现$("input").focus(function () {$(".list").fadeIn(200);})//绑定按键事件$("input").keyup(function () {var value = $("input").val();var list = $(".list li");//以空格为分隔符，将关键字放入数组，并去掉空字符串var values = value.split(" ");for (var i = 0; i < values.length; i++) {if (values[i] == "") {values.splice(i, 1)i = i - 1;}}//如果你删完了关键字，为保证代码的健全性，显示所有条目if (values.length == 0) {list.show()list.removeClass("selected")}//单关键字搜索//myArr数组用于存储搜索出来的li，用于多关键字搜索//比如说你是两个关键字 a 1 ，我把a的搜索结果和1的搜索结果放在一起var myArr = []for (var i = 0; i < values.length; i++) {//遍历列表list.each(function () {var name = $(this).text();//判断当前li是否包含关键字if (name.indexOf(values[i]) >= 0) {myArr.push($(this));//如果关键字和li完全相等，为保证健全性，加上selected类，其他li去掉该类if (name == value) {$(this).addClass('selected');$(this).siblings().removeClass('selected');} else {$(this).removeClass('selected');}//如果包含关键字，则显示当前li$(this).show();} else {//不包含关键字，则隐藏li$(this).hide();}});}//如果只有一个关键字，无法进入下面多关键字的方法if (values.length != 1 && values.length != 0) {//result数组用于存放重复的li，用于后面的多关键字查找var result = []//两个关键字//对myArr数组进行"去重"，拿到重复的那个li，放入resultfor (var i = myArr.length - 1; i >= 0; i--) {var targetNode = myArr[i];for (var j = 0; j < i; j++) {//由于存进myArr的是li标签对象，所以得这样取值if (targetNode[0].innerHTML == myArr[j][0].innerHTML) {result.push(targetNode);break;} }}//显示lilist.each(function () {$(this).hide()for (var i = 0; i < result.length; i++) {result[i].show();}})//两个以上关键字if (values.length > 2) {//该map主要用于存放 关键字查找之后，//由于存入result数组的可能有多个重复的，所以将每个重复的li的字符串，和出现的次数放进map，进行后续判断var map = new Map();for (var i = result.length - 1; i >= 0; i--) {var targetNode = result[i];for (var j = 0; j < i; j++) {if (targetNode[0].innerHTML == result[j][0].innerHTML) {var tmp = targetNode[0].innerHTMLvar count = map.get(targetNode[0].innerHTML);if (count != undefined && count != "") {count++;} else {count = 1;}map.set(targetNode[0].innerHTML, count)}}}//将map转为数组var arrayObj = Array.from(map);//show数组用来存放最后需要显示的livar show = [];//value值从高到低排序arrayObj.sort(function (a, b) {return b[1] - a[1]})console.log(arrayObj);var flag = true;//如果两个重复次数一样高，就都显示，如果有一个重复次数最高的，只显示那一个if (arrayObj.length != 1) {outer: for (var i = 0; i < arrayObj.length; i++) {if ((i + 1) < arrayObj.length && arrayObj[i][1] > arrayObj[i + 1][1]) {if (flag == false) {flag = true;} else { false == true } {show.push(arrayObj[i][0]);}//当前的数比之后的大，就不用再找了，直接出for循环break outer;}if ((i + 1) < arrayObj.length && arrayObj[i][1] == arrayObj[i + 1][1]) {if (flag == false) {show.push(arrayObj[i + 1][0]);flag = true;} else {show.push(arrayObj[i][0]);show.push(arrayObj[i + 1][0]);flag = false;}}}//为保证健全性，如果重复数组里只有一个匹配的，就直接显示那个} else if (arrayObj.length == 1) {show.push(arrayObj[0][0]);}// console.log(show)//显示lilist.each(function () {$(this).hide()for (var i = 0; i < show.length; i++) {if ($(this)[0].innerHTML == show[i]) {$(this).show();}}})}}})//失去焦点之后，列表消失$("input").blur(function () {$(".list").fadeOut(200);})//点击之后，输入框中填入内容，并加上selected类，同时去掉其他li的seleted类$(".list li").click(function () {$(this).addClass('selected');$(this).siblings().removeClass('selected');$("input").val($(this).text());})

本人对原文的单关键字搜索根据自己的需求进行了改进。代码较为繁琐，能力有限，请自行改进。
如果本文对你有帮助，可以点赞支持一下。如有意见或者建议，欢迎指正讨论。

jquery代码实现可输入多关键字搜索下拉框相关推荐

layui 带按钮的搜索框_layui table可输入关键字搜索下拉框（select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 一.介绍此项目是为了解决layui table表格单元格(col ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...
解决在 IntelliJ IDEA 中，输入代码时突然不会自动显示下拉框提示
解决在 IntelliJ IDEA 中,输入代码时突然不会自动显示下拉框提示笔者的运行环境: IntelliJ IDEA 2020.1.2 (Ultimate Edition) JDK 13.0.2 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
下拉搜索词api接口、淘宝搜索下拉框选词api，淘宝下拉词接口，淘宝搜索的下拉词推荐接口、关键词推荐api
一.下拉搜索框选词api介绍淘宝搜索下拉框选词是通过淘宝.天猫.手机润宝搜索下拉框查询淘宝搜索指数高.流量高.转化率高的关键词,并获取各关键词对应的在线相关宝贝数量及其推荐属性词.对于查询到的这些关 ...
bootstrap搜索下拉框：bootstrap-select
实现bootstrap搜索下拉框,本文采用bootstrap-select插件:bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和boot ...
bootstrap-select 插件搜索下拉框下拉选项太多导致下拉不显示
用bootstrap-select的做搜索下拉框的时候,如果下拉的选项太多的话,初次就会显示不出来,只有输入搜索内容时候才会显示内容.使用体验极为不佳.我用到的是1000+选项就会出现这问题. 看了源 ...
搜索下拉框推广优化如何做？下拉联想词有什么优势？
下拉词也叫推荐词,就是让网友输入更少的词,看到更多与搜索词相关的推荐词.例如百度下拉词是百度搜索为方便用户搜索而提供的关键字关联服务,提高了用户的搜索效率.大多数人在搜索关键字时不知道如何组织语言以达 ...
react ant protable自定义搜索下拉框
1.背景 select选择框很常见,这里实现 react ant protable实现自定义搜索下拉框 2.coding const [selectEnum, setSelectEnum] = use ...

jquery代码实现可输入多关键字搜索下拉框

jquery代码实现可输入多关键字搜索下拉框相关推荐

最新文章

热门文章