jqueryクエリストレッチボックス-フロントエンドQ&A-php.cn

jqueryクエリストレッチボックス

王林

リリース： 2023-05-28 13:44:09

オリジナル

398 人が閲覧しました

JQuery は、シンプルで使いやすい JavaScript ライブラリです。これは、多くの一般的な JavaScript 操作をカプセル化し、HTML ドキュメントと DOM 要素を操作する簡単な方法を提供します。この記事では、JQuery を使用してクエリストレッチボックスを作成する方法を読者に紹介します。

クエリストレッチボックスは、ユーザーがクエリ条件を入力して結果を返すことができる Web アプリケーションの一般的なコンポーネントです。通常、テキストボックスとオプションの「検索」ボタンが含まれています。ユーザーがクエリ条件を入力すると、ストレッチボックスは入力条件に基づいて結果を自動的にフィルタリングするため、ユーザーは必要なものをより迅速に見つけることができます。

JQuery を使用してクエリストレッチボックスを作成するには、次の手順が必要です。

HTML ドキュメント内にストレッチボックス要素を作成します。

HTML の基本要素を使用してストレッチボックスを作成できます。通常、ストレッチボックスには入力ボックスと検索ボタンが含まれます。入力ボックスはクエリ条件を入力するために使用され、検索ボタンは検索操作をトリガーするために使用されます。

以下は、クエリストレッチボックスを作成するための簡単な HTML コードです:

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

ログイン後にコピー

この例では、クラス名 "search-container" を持つ DIV 要素を作成します。これには入力が含まれます。タイプ「text」のボックスとクラス名「search-button」の検索ボタン。入力ボックスの「プレースホルダー」属性は、ユーザーが入力すべき内容を理解できるように、入力ボックスのデフォルトのテキストを提供します。

JQuery ライブラリをページに追加する

JQuery ライブラリを使用するには、ページの先頭または末尾に JQuery ライブラリへのリンクを追加する必要があります。以下は、JQuery ライブラリを HTML ページに追加するための簡単なリンクです:

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

ログイン後にコピー

このリンクを使用して JQuery ライブラリを HTML ドキュメントに追加すると、JQuery のすべての機能を使用してドキュメント要素を操作できます。。

クエリ関数を実装するための 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 コードでは、次の手順を使用します。

.ready() 関数を使用して、ページの準備ができた場合にのみ実行される関数内でコードをラップします。
.click() 関数を使用して、検索ボタンがクリックされたときに実行される関数のコードをラップします。
まず、ユーザーが入力したクエリ条件を取得します。これは検索ボックスの値に保存されます。
.each() 関数を使用して、結果を含む要素リストを走査します (ここでの要素リストは、例としてクラス名「search-list」を持つ順序なしリストを取り上げています)。
クエリ条件が要素のテキストに一致する場合は要素を表示し、一致しない場合は要素を非表示にする関数を各要素に対して実行します。

ユーザーが検索ボタンをクリックすると、JQuery コードはリスト内の各要素をチェックし、クエリ条件が含まれていない場合は非表示にします。クエリ基準が含まれている場合は、表示されたままになります。

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 スタイルの追加の 4 つのステップで達成されました。 JQuery を使用すると、クエリストレッチボックスの作成が簡単になるだけでなく、Web アプリケーションがよりユーザーフレンドリーで使いやすくなります。

以上がjqueryクエリストレッチボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。