用jQuery實作在前端搜尋-js教程-PHP中文網

首頁

web前端

js教程

用jQuery實作在前端搜尋

php中世界最好的语言

Apr 19, 2018 pm 02:14 PM

jquery 搜尋現在

這次帶給大家用jQuery實作在前端搜尋，用jQuery實作在前端搜尋的注意事項有哪些，以下就是實戰案例，一起來看一下。

# html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>工程轻量化与可靠性技术实验室</title>
</head>
<body>
<p class="content-right">
   <input type="text"><input type="submit" value="搜索">
   <h3>应用流体学</h3>
   <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>
  </p>
</body>

登入後複製

jQuery程式碼：

<script type="text/javascript">
  $(function(){
   $("input[type=text]").change(function () {
    var searchText = $(this).val();//获取输入的搜索内容
    var $searchLi = "";//预备对象，用于存储匹配出的li
    if (searchText != "") {
     //获取所有匹配的li
     $searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();
     //将内容清空
     $("#content_news_list").html("");
    }
    //将获取的元素追加到列表中
    $("#content_news_list").html($searchLi).clone();
    //判断搜索内容是否有效，若无效，输出not find
    if ($searchLi.length <= 0) {
     $("#content_news_list").html("<li>not find</li>")
    }
   })
   $("input[type=submit]").click(function () {
    $("searchText").change();
   })
  })
</script>

登入後複製

透過關鍵字檢索清單中的元素，並將其新增至ul。

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

此方法中就是透過判斷所取得的元素知否包含所搜尋的字符，來實現簡單的檢索功能。

但卻有相容問題，無法相容IE，在取得元素parent()時無法將內容寫入清單中。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

wps表格找不到正在搜尋的資料,請檢查搜尋選項位置 Mar 19, 2024 pm 10:13 PM

智能為主導的時代，辦公室軟體也普及開來，Wps表格由於它的靈活性被廣大的辦公室人員採用。在工作上要求我們不只是要學會簡單的表格製作和文字輸入，我們要掌握更多的操作技能，才能完成實際工作中的任務，有數據的報表，運用表格更方便更清楚更準確。今天我們帶給大家的課程是：wps表格找不到正在搜尋的資料,為什麼請檢查搜尋選項位置？ 1.先選取Excel表格，雙擊開啟。然後在該介面中，選取所有的儲存格。　　2、然後在該介面中，點選頂部工具列裡「檔案」裡的「編輯」選項。　　3、其次在該介面中，點選頂部工具列裡的“

手機淘寶怎麼搜尋店鋪搜尋店舖名的方法 Mar 13, 2024 am 11:00 AM

手機淘寶app軟體內提供的商品好物非常多，隨時隨地想買就買，而且件件都是正品，每一件商品的價格標籤一清二楚，完全沒有任何的複雜操作，享受更加便捷的購物樂趣。隨心所欲自由搜尋選購，不同品類的商品板塊都是開放的，添加個人的收貨地址以及聯絡電話，方便快遞公司聯繫到你，實時查看最新的物流動態，那麼有些新人用戶第一次使用它，不知道如何搜尋商品，當然只需要在搜尋欄輸入關鍵字就能找到所有的商品結果，自由選購根本停不下來，現在小編在線詳細為手機淘寶用戶們帶來搜尋店鋪名的方法。　　1.先打開手機淘寶app,

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

阿里雲盤怎麼搜尋別人的資源 Mar 30, 2024 am 10:31 AM

阿里雲盤，這款備受歡迎的儲存工具，不僅可以幫助我們有效率地管理個人資源，還提供了許多便利功能。那麼許多用戶在搜尋雲盤資源的時候，可能會搜不到，所以想要搜尋全盤的所有資源，那麼在下文中就由本站小編來為大家詳細解答這一問題，分享具體的搜尋方法，想要了解的使用者就快來跟著本文一起操作了解吧！阿里雲盤搜怎麼索別人的資源1、先在阿里雲盤的資料夾目錄中搜尋資源檔案的具體路徑即可找到對應的資料夾了。 2.然後使用文件搜尋功能，輸入想要尋找的關鍵字即可找到相關的文件內容。 3.接著我們透過其他人分享鏈接，直接定位和下

Excel搜尋快捷鍵是什麼 Mar 20, 2024 am 10:52 AM

想知道Excel搜尋快捷鍵是什麼嗎？答案很簡單，只要用到【Ctrl+F】就能進行快速搜尋了。我們常用Excel來記錄很多不同的資料和名稱，如果需要改變的時候，因為資料太多，我們在尋找的時候會很不方便，這樣找起來會相當麻煩。其實，我們完全可以用快速搜尋的捷徑來找到我們需要更改的資料！那麼，Excel的搜尋快捷鍵是什麼呢？今天就來教大家excel表格裡面的快捷查找按鍵，為你們的工作省心省力。這裡我用的是本MicrosoftOfficeexcel2010版本來進行示範的，有需要的同學可以

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

See all articles

用jQuery實作在前端搜尋

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題