jquery查詢拉伸框

JQuery是一個簡單好用的JavaScript函式庫。它封裝了許多常見的JavaScript操作，並提供了一種簡捷的方式來操作HTML文件和DOM元素。在本篇文章中，我們將向讀者介紹如何使用JQuery來建立一個查詢拉伸框。

查詢拉伸框是一個常見的網路應用程式中的元件，它允許使用者輸入查詢條件並傳回結果。它通常包括一個文字框和一個可選的“搜尋”按鈕。當使用者輸入查詢條件時，拉伸框會根據輸入條件自動過濾結果，從而幫助使用者更快找到所需的內容。

要使用JQuery建立查詢拉伸框，我們需要以下步驟：

1. 在HTML文件中建立拉伸框元素。

我們可以使用HTML的基本元素來建立拉伸框。通常，拉伸框包括一個輸入框和一個搜尋按鈕。輸入框用於輸入查詢條件，搜尋按鈕用於觸發搜尋操作。

以下是一個簡單的HTML程式碼，用於建立一個查詢拉伸框：

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

在這個範例中，我們建立了一個類別名為「search-container」的DIV元素，它包含一個類型為“text”的輸入框和一個類別名為“search-button”的搜尋按鈕。輸入框中的“placeholder”屬性為輸入框提供了一個預設文本，幫助使用者理解它應該輸入的內容。

2. 新增JQuery函式庫到頁面中

要使用JQuery函式庫，我們需要在頁面的頭部或尾部加入JQuery函式庫的連結。下面是一個簡單的鏈接，用於添加JQuery庫到HTML頁面中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

當我們使用此鏈接將JQuery庫添加到HTML文檔中時，我們就可以使用JQuery的所有功能來操縱文檔元素了。

3. 編寫JQuery程式碼以實現查詢功能

一旦我們在頁面中創建了拉伸框元素並添加了JQuery庫，我們就可以開始編寫JQuery程式碼來實現拉伸框的功能了。我們將編寫以下程式碼，透過輸入框中輸入的文字來過濾元素並在頁面上顯示結果。

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

上述JQuery程式碼使用了以下步驟：

1. 我們使用.ready()函數將程式碼包裝在當頁面準備就緒時才執行的函數中。
2. 我們使用.click()函數將程式碼包裝在當搜尋按鈕被點擊時才執行的函數中。
3. 我們首先取得使用者輸入的查詢條件，它儲存在搜尋框的值中。
4. 我們使用.each()函數遍歷包含結果的元素列表（這裡的元素列表以一個類別名為「search-list」的無序列表為例）。
5. 在每個元素上執行一個函數，如果查詢條件與任何元素的文字匹配，則顯示該元素，否則將其隱藏。

當使用者點擊搜尋按鈕時，JQuery程式碼將檢查清單中的每個元素，如果它們不包含查詢條件，則將其隱藏。如果它們包含查詢條件，它們將保持可見狀態。

4. CSS樣式設計

最後，為了讓查詢拉伸框看起來像一組單獨的元素，我們需要加入一些CSS樣式。以下是一個簡單的CSS樣式，用於將搜尋框和搜尋按鈕的樣式套用到頁面上的所有查詢拉伸框：

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

在上述CSS樣式中，我們在.search-container類別下定義了一些樣式，這些樣式會套用於包含搜尋框和搜尋按鈕的DIV元素。我們還為輸入框和搜尋按鈕定義了特定的樣式，以使它們看起來更加美觀。

結論

在本篇文章中，我們向讀者介紹如何使用JQuery來建立一個查詢拉伸框。我們透過建立HTML元素、新增JQuery函式庫、編寫JQuery程式碼和新增CSS樣式四個步驟來實現了這一目標。 JQuery不僅讓創建查詢拉伸框變得更加簡單，還可以讓Web應用程式更加友善和易用。

以上是jquery查詢拉伸框的詳細內容。更多資訊請關注PHP中文網其他相關文章！