参考网站：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，放入result
for (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;
}
}
}
//显示li
list.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].innerHTML
var 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数组用来存放最后需要显示的li
var 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)
//显示li
list.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());
})
本人对原文的单关键字搜索根据自己的需求进行了改进。代码较为繁琐，能力有限，请自行改进。
如果本文对你有帮助，可以点赞支持一下。如有意见或者建议，欢迎指正讨论。