jQuery實現(xiàn)的簡單前端搜索功能示例

本文實例講述了jQuery實現(xiàn)的簡單前端搜索功能。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的江陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>工程輕量化與可靠性技術(shù)實驗室</title>
</head>
<body>
<div class="content-right">
   <input type="text"><input type="submit" value="搜索">
   <h4>應(yīng)用流體學(xué)</h4>
   <ul id="content_news_list">
    <li><span>2015-7-8</span><a href="">這里是文章的標題1</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題2</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題3</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題4</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題5</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
    <li><span>2015-7-8</span><a href="">這里是文章的標題4</a></li>
   </ul>
  </div>
</body>

jQuery代碼：

<script type="text/javascript">
  $(function(){
   $("input[type=text]").change(function () {
    var searchText = $(this).val();//獲取輸入的搜索內(nèi)容
    var $searchLi = "";//預(yù)備對象，用于存儲匹配出的li
    if (searchText != "") {
     //獲取所有匹配的li
     $searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();
     //將內(nèi)容清空
     $("#content_news_list").html("");
    }
    //將獲取的元素追加到列表中
    $("#content_news_list").html($searchLi).clone();
    //判斷搜索內(nèi)容是否有效，若無效，輸出not find
    if ($searchLi.length <= 0) {
     $("#content_news_list").html("<li>not find</li>")
    }
   })
   $("input[type=submit]").click(function () {
    $("searchText").change();
   })
  })
</script>

通過關(guān)鍵字檢索列表中的元素，并將其添加到ul中。

其中$(':contains(text)')獲取包含指定字符的元素，該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

此方法中就是通過判斷所獲取的元素知否包含所搜索的字符，來實現(xiàn)簡單的檢索功能。

但是卻存在兼容問題，無法兼容IE，在獲取元素parent()時無法將內(nèi)容寫入列表中。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

網(wǎng)站名稱：jQuery實現(xiàn)的簡單前端搜索功能示例
文章起源：http://bm7419.com/article42/jdseec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、小程序開發(fā)、微信公眾號、品牌網(wǎng)站設(shè)計、ChatGPT、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容