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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1157 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

需求如下：

为 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

quot

名称

class

13 条回复

Vhc001

2021-09-12 11:54:50 +08:00

预算多少？

cpstar

2021-09-12 12:02:46 +08:00

var result=[];
$("ul li").each(function(){
var $this=$(this);
var item={};
item.id=$this.attr("id");
item.type=$this.class();
item.text=$this.text();
result.push(item);
});

盲写，没测试，大概这个东西。

oldshensheep

2021-09-12 12:04:42 +08:00

写这个脚本的目的是干什么呢？交作业？学习？还是什么。如果是学习，那就说明遇到的问题比较好。
如果是其他的目的……这么简单的问题……不急的话可以再学习学习，你知道答案用处也不大。

搜索的话可以用正则表达式，搜索的结果可以拼接字符串放到 DOM 里，就可以显示结果。
筛选你可以控制 css 的 display 。

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;
}