JavaScript 表格搜索

格搜索

要求的功能:基礎(chǔ)版本——字符串比較忽略大小寫——大小寫轉(zhuǎn)換模糊搜索——search的使用多關(guān)鍵詞——split 高亮顯示、篩選

符合百度搜索的要求

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
        var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt=oTxt.value.toLowerCase();

        var arr=sTxt.split(' ');

        oTab.tBodies[0].rows[i].style.display='none';

        for(var j=0;j<arr.length;j++){
        if(sTab.search(arr[j])!=-1){
        oTab.tBodies[0].rows[i].style.display='block';
        }
        }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

以下為簡單版本

版本1：基礎(chǔ)版本——字符串比較

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){
            		oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            		oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本2:忽略大小寫——大小寫轉(zhuǎn)換

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
            var sTxt=oTxt.value;
            if(sTab.toLowerCase()==sTxt.toLowerCase()){
            oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本3：模糊搜索——search的使用

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sTxt=oTxt.value.toLowerCase();
            if(sTab.search(sTxt)!=-1){
            oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本4：多關(guān)鍵詞——split

文介紹了一種新的HTML元素搜索方法，并提供了一個實(shí)用的工具來幫助開發(fā)者快速找到所需的元素。這對于那些需要處理大量HTML元素的開發(fā)者來說是非常有用的。文章還通過提供一些常見元素的用法示例，幫助開發(fā)者更好地理解和應(yīng)用這些元素。在眾多元素中找到特定的元素。為了解決這個問題，文章介紹了一種新的HTML元素搜索方法。

下面是正文

一個新的語義元素已經(jīng)加入了 HTML 標(biāo)準(zhǔn)。它代表文檔中用于搜索或過濾的部分。它應(yīng)該包含表單控件（如文本輸入、下拉菜單、按鈕等），搜索/過濾的范圍可以是任何內(nèi)容：從同一文檔到整個互聯(lián)網(wǎng)。

如何運(yùn)作

在 <search> 元素之前，我們可以在 <form> 標(biāo)簽中添加 role="search" 以指示該表單用于搜索：

<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

有了這個新添加的功能，我們可以使用 <search> 標(biāo)簽來包裝表單：

由于 <search> 是標(biāo)準(zhǔn)中的新內(nèi)容，所有瀏覽器、屏幕閱讀器和其他工具可能需要一段時間才能跟上。在此期間，我們可以使用一個 hack，指定它已經(jīng)具有的 ARIA 角色（類似于 <nav> 所發(fā)生的情況）。這在未來可能會變得多余，但它可能會為我們的代碼做好準(zhǔn)備，以便在瀏覽器支持新標(biāo)簽時使用。

<search role="search">
   ...
</search>

這看起來有些違反直覺：我們正在移除 role="search" ，但我們正在用<search>包裝所有內(nèi)容。總體而言，這是更多的文本/代碼（僅三個字符）和更多的嵌套（一個更高的級別）。

溫馨提示：盡管我們在構(gòu)建搜索組件時并不強(qiáng)制需要
標(biāo)簽，但是使用它卻能帶來額外的好處（甚至是必須的）。這樣，即使在無JavaScript環(huán)境下，搜索功能也能保持正常運(yùn)行，或者說，這是一種實(shí)踐漸進(jìn)式增強(qiáng)策略的方式。

另一個需要注意的關(guān)鍵點(diǎn)是，搜索區(qū)域不一定是網(wǎng)站或在線平臺上帶有搜索按鈕的文本輸入框。我們可以使用 <search> 來過濾結(jié)果或表格行。它的實(shí)用性不僅限于文本輸入和搜索框：

<search>
  <h2>Filter results</h2>

  <form>
    <label for="cartype">Car type</label>
    <select id="cartype">
      <option value="coupe">Coupe</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="electric">Electric?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

看法

擁有一個用于識別搜索區(qū)域的元素是很好的。正如Scott O'Hara在這篇文章中指出的那樣，直到現(xiàn)在，這是唯一一個在HTML中沒有語義等效項(xiàng)的ARIA地標(biāo)角色：

banner → <header>
complementary → <aside>
form → <form>
main → <main>
navigation → <nav>
region → <section>
search → ???

使用 <search> 來標(biāo)識應(yīng)具有“搜索”角色的部分，我們將使用一些語義化的 HTML 元素覆蓋所有 ARIA 地標(biāo)角色。這很棒：它將提高可訪問性（盡管如上所述，需要一段時間才能讓所有瀏覽器跟上），并擴(kuò)展了語言的語義。

但是，從程序員的角度來看，它感覺不夠完善或沒有為現(xiàn)有的實(shí)現(xiàn)增加太多東西。其他語義元素可以提高可訪問性并簡化我們編寫特定組件的方式。例如，像 <tabpanel> 和 <tab> 這樣的東西，在我看來會更具說服力和價值。

這并不會削弱它的重要性。所有的改進(jìn) - 即使是微小的改進(jìn) - 都是受歡迎的。這也適用于 <search> 。這是 HTML 家族的一個極好的新成員。

者：HelloGitHub-追夢人物

搜索是一個復(fù)雜的功能，但對于一些簡單的搜索任務(wù)，我們可以使用 Django Model 層提供的一些內(nèi)置方法來完成。現(xiàn)在我們來為我們的博客提供一個簡單的搜索功能。

概述

博客文章通常包含標(biāo)題和正文兩個部分。當(dāng)用戶輸入某個關(guān)鍵詞進(jìn)行搜索后，我們希望為用戶顯示標(biāo)題和正文中含有被搜索關(guān)鍵詞的全部文章。整個搜索的過程如下：

用戶在搜素框中輸入搜索關(guān)鍵詞，假設(shè)為 “django”，然后用戶點(diǎn)擊了搜索按鈕提交其輸入的結(jié)果到服務(wù)器。
服務(wù)器接收到用戶輸入的搜索關(guān)鍵詞 “django” 后去數(shù)據(jù)庫查找文章標(biāo)題和正文中含有該關(guān)鍵詞的全部文章。
服務(wù)器將查詢結(jié)果返回給用戶。

整個過程就是這樣，下面來看看 Django 如何用實(shí)現(xiàn)這些過程。

將關(guān)鍵詞提交給服務(wù)器

先來回顧一下我們的 Django 博客的 Post（文章）模型：

blog/models.py
class Post(models.Model):
    # 標(biāo)題
    title = models.CharField("標(biāo)題", max_length=70)
    # 正文
    body = models.TextField("正文")
    
    # 其他屬性...
    
	def __str__(self):
        return self.title

先看到第 1 步，用戶在搜索框輸入搜索關(guān)鍵詞，因此我們要在博客上為用戶提供一個搜索表單，HTML 表單代碼大概像這樣：

templates/base.html
<form role="search" method="get" id="searchform" action="{% url 'blog:search' %}">
  <input type="search" name="q" placeholder="搜索" required>
  <button type="submit"><span class="ion-ios-search-strong"></span></button>
</form>

特別注意這里 <input type="search" name="q" placeholder="搜索" required> 中的 name 屬性，當(dāng)用戶在這個 input 中輸入搜索內(nèi)容并提交表單后，鍵入的數(shù)據(jù)會以鍵值對的形式提交服務(wù)器，這個鍵的名字就是通過 name 屬性指定的。這樣服務(wù)器就可以根據(jù) name 的值來取得用戶輸入的內(nèi)容。

用戶輸入了搜索關(guān)鍵詞并點(diǎn)擊了搜索按鈕后，數(shù)據(jù)就被發(fā)送給了 Django 后臺服務(wù)器。表單的 action 屬性的值為 {% url 'blog:search' %}（雖然我們還沒有寫這個視圖函數(shù)），表明用戶提交的結(jié)果將被發(fā)送給 blog 應(yīng)用下 search 視圖函數(shù)對應(yīng)的 URL。

查找含有搜索關(guān)鍵詞的文章

搜索的功能將由 search 視圖函數(shù)提供，代碼寫在 blog/views.py 里：

blog/views.py
from django.contrib import messages
def search(request):
    q = request.GET.get('q')
    if not q:
        error_msg = "請輸入搜索關(guān)鍵詞"
        messages.add_message(request, messages.ERROR, error_msg, extra_tags='danger')
        return redirect('blog:index')
    post_list = Post.objects.filter(Q(title__icontains=q) | Q(body__icontains=q))
    return render(request, 'blog/index.html', {'post_list': post_list})

首先我們使用 request.GET.get('q') 獲取到用戶提交的搜索關(guān)鍵詞。用戶通過表單 get 方法提交的數(shù)據(jù) Django 為我們保存在 request.GET 里，這是一個類似于 Python 字典的對象，所以我們使用 get 方法從字典里取出鍵 q 對應(yīng)的值，即用戶的搜索關(guān)鍵詞。這里字典的鍵之所以叫 q 是因?yàn)槲覀兊谋韱沃兴阉骺?input 的 name 屬性的值是 q，如果修改了 name 屬性的值，那么這個鍵的名稱也要相應(yīng)修改。

接下來我們做了一個小小的校驗(yàn)，如果用戶沒有輸入搜索關(guān)鍵詞而提交了表單，我們就無需執(zhí)行查詢，我們給給用戶發(fā)一條錯誤提醒消息，這里使用了 django messages 應(yīng)用，這在 交流的橋梁：評論功能中講過。然后將用戶重定向到首頁。這里的 redirect 函數(shù)也在那篇教程中講過。

如果用戶輸入了搜索關(guān)鍵詞，我們就通過 filter 方法從數(shù)據(jù)庫里過濾出符合條件的所有文章。這里的過濾條件是 title__icontains=q，即 title 中包含（contains）關(guān)鍵字 q，前綴 i 表示不區(qū)分大小寫。這里 icontains 是查詢表達(dá)式（Field lookups），我們在之前也使用過其他類似的查詢表達(dá)式，其用法是在模型需要篩選的屬性后面跟上兩個下劃線。Django 內(nèi)置了很多查詢表達(dá)式，建議過一遍 Django 官方留個印象，了解每個表達(dá)式的作用，以后碰到相關(guān)的需求就可以快速定位到文檔查詢其用途 Field lookups。

此外我們這里從 from django.db.models 中引入了一個新的東西：Q 對象。Q 對象用于包裝查詢表達(dá)式，其作用是為了提供復(fù)雜的查詢邏輯。例如這里 Q(title__icontains=q) | Q(body__icontains=q) 表示標(biāo)題（title）含有關(guān)鍵詞 q 或者正文（body）含有關(guān)鍵詞 q ，或邏輯使用 | 符號。如果不用 Q 對象，就只能寫成 title__icontains=q, body__icontains=q，這就變成標(biāo)題（title）含有關(guān)鍵詞 q 且正文（body）含有關(guān)鍵詞 q，就達(dá)不到我們想要的目的。

綁定 URL

有了視圖函數(shù)后記得把視圖函數(shù)映射到相應(yīng)了 URL，如下。

blog/urls.py
urlpatterns = [
    # 其他 url 配置
    path('search/', views.search, name='search'),
]

大功告成，在導(dǎo)航欄嘗試輸入一些關(guān)鍵詞，看看效果吧！

當(dāng)然這樣的搜索功能是非常簡略的，難以滿足一些復(fù)雜的搜索需求。編寫一個搜索引擎是一個大工程，好在 django-haystack 這款第三方 app 為我們完成了全部工作。使用它我們可以實(shí)現(xiàn)更加復(fù)雜的搜索功能，比如全文檢索、按搜索相關(guān)度排序、關(guān)鍵字高亮等等類似于百度搜索的功能，功能十分強(qiáng)大。當(dāng)然其使用也會復(fù)雜一些，下一篇教程將向大家介紹 django-haystack 結(jié)合 Elasticsearch 搜索引擎的使用方法。

『講解開源項(xiàng)目系列』——讓對開源項(xiàng)目感興趣的人不再畏懼、讓開源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項(xiàng)目如此簡單。歡迎留言聯(lián)系我們、加入我們，讓更多人愛上開源、貢獻(xiàn)開源

在線咨詢

上一篇：WebService是什么？他究竟和WebSocket有什么關(guān)系？
下一篇：9.HTML鏈接標(biāo)簽

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商