付费找大佬帮忙写个 JavaScript 脚本

小白一枚，尝试自己研究没搞定，所以在这求助大家，不知这个需求是否能实现。

有愿意帮忙的大佬麻烦留个联系方式和报价，提前感谢！

需求如下：

为 HTML 页面添加搜索功能，最好用 jQuery 语法写

页面里有一组汽车型号列表，不同型号有属于各自的种类（例如汽油车、柴油车、电动车）

部分汽车型号针对市场不同有不同发布名称，但列表只有国内市场发布名称

需要实现的效果是，页面添加搜索框，输入汽车型号关键词显示对应的产品

由于列表只有国内市场发布名称，所以数据源在脚本里定义好，结合 <li> CSS 选择器找到对应的汽车型号，下面详细说明：

HTML 内容（ id 选择器对应汽车型号，class 选择器对应汽车种类，这些在页面里已经有）

<ul>
<li id="gwmc30" class="battery">长城 C30</li>
<li id="geelytx4" class="diesel">英伦 TX4</li>
<li id="geely300t" class="petrol">星越 300T</li>
</ul>

脚本里定义好对应关系（格式类似下面）

gwmc30:长城 C30,丹麦市场名称,其它市场名称
geelytx4:英伦 TX4,丹麦市场名称,其它市场名称
geely300t:星越 300T,丹麦市场名称,其它市场名称

上面是主要需求，还有另外两个小需求，能实现更好

在页面添加种类筛选按钮，例如点击汽油车按钮就显示所有汽油车型号（利用列表里的 class 选择器）
搜索框下面添加热门汽车型号（ HTML 文本元素），点击就自动填入搜索框，并显示搜索结果

HTML 样本 https://codepen.io/zhao3574/pen/WNOxKyd

HolaPz

2021-09-12 12:12:57 +08:00

JavaScript:
const searchBar = document.querySelector("input[type='text']");
const contentBar = document.querySelector(".prod-cate-lst");

searchBar.onchange = function(e) {
const keyWords = searchBar.value;
const lis = contentBar.children;
if(keyWords === '') {
for(let i = 0; i < lis.length; i++)
lis[i].classList.remove("hideLi");
return;
}

for(let i = 0; i < lis.length; i++) {
if(!lis[i].innerHTML.includes(keyWords))
lis[i].classList.add("hideLi");
else
lis[i].classList.remove("hideLi");
}
}

CSS:
.hideLi {
display: none;
}