JavaScript实现搜索功能 - 夏目友人帐

JavaScript实现搜索功能

"夏目贵志" 发表于: 2018年09月06日

今天订外卖的时候突然关注了一下美团的搜索食物的功能,觉得这个功能我们前端用js应该也能实现,于是写下此博客:

一:对文章关键字的搜索(数组的方法):

<!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>

今天订外卖的时候突然关注了一下美团的搜索食物的功能,觉得这个功能我们前端用js应该也能实现,于是写下此博客:

一:对文章关键字的搜索(数组的方法):

<!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>

文章作者:用月光取暖

原文链接:https://blog.csdn.net/qq_41332728/article/details/80493833

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

添加新评论