参考网站：/articles/1552378028436732
/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());})
本人对原文的单关键字搜索根据自己的需求进行了改进。代码较为繁琐，能力有限，请自行改进。
如果本文对你有帮助，可以点赞支持一下。如有意见或者建议，欢迎指正讨论。
