jQuery高亮显示搜索结果

来源:https://www.sucaihuo.com/js/882.html 2016-07-01 21:36浏览(1060) 收藏

本文不仅查找标题,还会搜索描述内容。你试试查找“”网站模板“”关键词,会发现描述内容也可以被精确高亮显示。
jQuery高亮显示搜索结果
分类:表单代码 > 搜索框 难易:中级
查看演示 下载资源 下载积分: 20 积分

搜索关键字输入框,和匹配数据列表

<div class="faq">
    <input type="search" value="" placeholder="网站模板" />
    <ul>
        <li id="faq-1">
            <h2><a href="#faq-1">素材火</a></h2>
            <div>
                <p>素材火提供网站模板,jQuery特效,PHP包括PHP教程PHP源码PHP商城源码PHP培训PHP面试题和PHP招聘等</p>
            </div>
        </li>
        <li id="faq-2">
            <h2><a href="#faq-2">Hanging Gardens of Babylon</a></h2>
            <div>
                <p>The Hanging Gardens of Babylon were one of the Seven Wonders of the Ancient World, and the only one whose location has not been definitely established.</p>
                <p>The Hanging Gardens were a distinctive feature of ancient Babylon. They were a great source of pride to the people, and were often described in accounts written by visitors to the city. Possibly built by King Nebuchadnezzar II in 600 BC, the gardens are believed to have been a remarkable feat of engineering: an ascending series of tiered gardens containing all manner of trees, shrubs, and vines. The gardens were said to have looked like a large green mountain constructed of mud bricks, rising from the center of the city.</p>
            </div>
        </li>
    </ul>
    <div class="faq__notfound"><p>No matches were found&hellip; Try &ldquo;giza&rdquo;.</p></div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2