包含搜索内容的效果:
没有匹配内容的效果:
html代码:
贴上来这张html是为了让大家看到结构 五条数据为一组
js代码(需要先引入jquery):
<script>
//获取地址栏参数//可以是中文参数
function getUrlParam(key) {
// 获取参数
var url = window.location.search;
// 正则筛选地址栏
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
// 匹配目标参数
var result = url.substr(1).match(reg);
//返回参数值
return result ? decodeURIComponent(result[2]) : null;
}
$(".mainBtn").click(function () {
var keyword = $.trim($(".mainSearch").val());
console.log(keyword, "sdsdsd")
if (keyword) {
var url = 'searchDetails.html?name=' + keyword;
window.location = url;
} else {
alert("请输入搜索内容")
}
});
$(function () {
var jsons = [
{ "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "哈哈中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "任珑会长一行赴我会理事发布会单位国家能源", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会电子招标采购专业委员会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会2020年行业发布会线上", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "我会任珑会长出席“白鹤滩—江苏特高压工程第一批设备合同签约”", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会电子招标采购专业委员会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会1999年行业发布会线上", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "我会任珑会长出席“白鹤滩—江苏特高压工程第一批设备合同签约”", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
{ "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" }
]
var value = getUrlParam('name')
$(".mainSearch").val(value)
if ($(".mainSearch").val()) {
$(".deletes").css("display", "block !important")
} else {
$(".deletes").css("display", "none")
}
$(".mainSearch").bind("input propertychange", function (event) {
if ($(".mainSearch").val()) {
$(".deletes").css("display", "block")
} else {
$(".deletes").css("display", "none")
}
});
$(".deletes").click(function () {
$(".mainSearch").val("")
$(".deletes").css("display", "none")
})
$(".mainSearch").focus(function () {
if ($(".mainSearch").val()) {
$(".deletes").css("display", "block")
} else {
$(".deletes").css("display", "none")
}
})
var getlist = []
getlist = jsons.filter((item) =>
item.name.includes(value)
)
if (getlist.length > 0) {
console.log("343434")
console.log(getlist)
var str = ''
$.each(getlist, function (i, n) {
let remainder = i%5
if(remainder==0){
if(str){
str+='</div>'
}
str += "<div class='association_listbox'>";
}
var name = n.name.replace(value, "<label>" + value + "</label>");
str += "<ul>";
str += "<li></li>";
str += "<li class='lines'><a href='xhdtDetails.html'>" + n.tit + name + "</a>";
str += "</li>";
str += "<li>" + n.time + "</li>";
str += "</ul>";
})
str += "</div>";
$(".association_list").html(str);
$(".association_tits").html(getlist.length)
$(".search_words").html(value)
} else {
console.log("123")
var str = "<div class='searchNo'>";
str += "<img src='../img/searchzw.png'>";
str += "<p>暂无信息</p>";
str += "</div>";
$(".association_list").html(str);
$(".association_content").css("height", "380px")
$(".association_tits").html("0")
$(".search_words").html(value)
}
});
</script>
css样式就不贴了 谢谢大家