搜索文章和表单功能

1、表单

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

<div id="content">
    <ul>
        <input type="" name="" id="" value="" placeholder="请输入城市的名称或拼音"/>
        <button id="btn">搜索</button>
        <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>
        <li pname="南京呗" cname="njb">南京呗</li>
        <li pname="长安" cname="ca">长安</li>
    </ul>

</div>

var li=document.getElementsByTagName('li');
    function search(){
        let arr=$('input').val();
        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";
            }
        }
    }
    $('#btn').click(()=>{search()});

2、文章

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

<input type="text" name="search" id="search" value="馋" onclick="this.value='' "/>
<input type="button" name="" id="bbtn" value="搜索" />
<div id="div">
    <p>馋，在英文里找不到一个十分适当的字。罗马暴君尼禄，以至于英国的亨利八世，在大宴群臣的时候，常见其撕下一根根又粗又壮的鸡腿，举起来大嚼，旁若无人，好一副饕餮相！但那不是馋。埃及废王法鲁克，据说每天早餐一口气吃二十个荷包蛋，也不是馋，只是放肆，只是没有吃相。对有某一种食物有所偏好，于是大量的吃，这是贪多无厌。馋，则着重在食物的质，最需要满足的是品味。上天生人，在他嘴里安放一条舌，舌上还有无数的味蕾，教人焉得不馋？馋，基于生理的要求；也可以发展成为近于艺术的趣味。
        也许我们中国人特别馋一些。馋字从食，有声。毚音谗，本义是狡兔，善于奔走，人为了口腹之欲，不惜多方奔走以膏馋吻，所谓“为了一张嘴，跑断两条腿”。</p>
</div>

 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('<strong style="color: yellow;">'+arr+'</strong>');
        text.innerHTML=str;
    }