JS怎么实现站内搜索功能?
发布网友
发布时间：2022-04-23 09:53
共1个回答
热心网友
时间：2022-04-20 08:52
一：对文章关键字的搜索（数组的方法）：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#search{
height:40px;width: 200px;font-size: 30px;text-align: center;
}
#div {
font-size: 20px;width: 600px;
}
#div span{
color: red;
}
</style>
</head>
<body >
<input type="text" name="search" id="search" value="馋" onclick="this.value='' "/>
<input type="button" name="" id="bbtn" value="搜索" />
<div id="div">
<p>馋，在英文里找不到一个十分适当的字。罗马暴君尼禄，以至于英国的亨利八世，在大宴群臣的时候，常见其撕下一根根又粗又壮的鸡腿，举起来大嚼，旁若无人，好一副饕餮相！但那不是馋。埃及废王法鲁克，据说每天早餐一口气吃二十个荷包蛋，也不是馋，只是放肆，只是没有吃相。对有某一种食物有所偏好，于是大量的吃，这是贪多无厌。馋，则着重在食物的质，最需要满足的是品味。上天生人，在他嘴里安放一条舌，舌上还有无数的味蕾，教人焉得不馋？馋，基于生理的要求；也可以发展成为近于艺术的趣味。
也许我们中国人特别馋一些。馋字从食，有声。毚音谗，本义是狡兔，善于奔走，人为了口腹之欲，不惜多方奔走以膏馋吻，所谓“为了一张嘴，跑断两条腿”。</p>
</div>
<script type="text/javascript">
var bbtn=document.getElementById('bbtn');
var search=document.getElementById('search');
var text=document.getElementsByTagName('p')[0];
var text1=text.innerHTML;
var arr=[];
var str=text1;
bbtn.onclick=function(){
str=text1
arr=search.value;
str=str.split(arr).join('<span>'+arr+'</span>');
text.innerHTML=str;
}
</script>
</body>
</html>
二：对li表单的搜索：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
#content{
margin: 100px 300px;display: block;
}
input{
height: 50px;width: 400px;font-size: 30px;line-height: 50px;
}
ul{
}
li{
margin:10px 0px;display: block;
}
</style>
</head>
<body>
<div id="content">
<ul>
<input type="" name="" id="" value="" placeholder="请输入城市的名称或拼音"/>
<li pname="北京" cname="bj">北京</li>
<li pname="株洲" cname="zz">株洲</li>
<li pname="上海" cname="sh">上海</li>
<li pname="长沙" cname="cs">长沙</li>
<li pname="杭州" cname="hz">杭州</li>
<li pname="天津" cname="tj">天津</li>
<li pname="西安" cname="xa">西安</li>
<li pname="成都" cname="cd">成都</li>
<li pname="武汉" cname="wh">武汉</li>
<li pname="南京" cname="nj">南京</li>
</ul>
</div>
<script type="text/javascript">
var li=document.getElementsByTagName('li');
var text=document.getElementsByTagName('input')[0];
function search(){
var arr=text.value;
for(var i=0;i<li.length;i++)
{
li[i].style.display="none";
if(li[i].getAttribute('pname').indexOf(arr)!=-1||li[i].getAttribute('cname').indexOf(arr)!=-1)
{
li[i].style.display="block";
}
}
}
text.oninput=function(){
search();
}
</script>
</body>
</html>
