検索HTMLの実装-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

検索HTMLの実装

PHPz

May 15, 2023 pm 05:27 PM

検索機能は Web アプリケーションに不可欠な部分であり、ユーザーは Web サイト上で必要な情報をすばやく見つけることができます。この記事では、HTML といくつかの簡単な JavaScript コードを使用して基本的な検索機能を実装する方法を説明します。

まず、ユーザーの検索クエリを受け取るフォームを作成する必要があります。以下に示すように、HTML の form 要素を使用してこのフォームを実装できます。

<form>
  <input type="text" id="searchInput" placeholder="Search...">
  <button type="submit" id="searchButton">Search</button>
</form>

ログイン後にコピー

上記のコードでは、2 つの要素を使用します。1 つは検索クエリを受け取るためのテキストフィールドである input 要素です。ユーザーが入力したもの。また、入力ボックスのヒントを提供するプレースホルダーテキスト「検索...」も追加しました。

もう 1 つは button 要素で、ユーザーが検索フォームを送信できるようにするボタンです。 input 要素の type 属性を使用して送信ボタンを作成することもできます。

次に、ユーザーの検索リクエストを処理して結果を返すための JavaScript コードを追加する必要があります。 JavaScript で DOM API を使用すると、ユーザーが入力した検索クエリと Web サイトからの検索結果を取得できます。

以下は、検索リクエストを処理するための基本的な JavaScript コードを含む、完全な HTML コードです。

<!DOCTYPE html>
<html>
<head>
  <title>Search Example</title>
</head>
<body>
  <form>
    <input type="text" id="searchInput" placeholder="Search...">
    <button type="submit" id="searchButton">Search</button>
  </form>

  <ul id="searchResults">
    <!-- Search results will be added here -->
  </ul>

  <script>
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    const searchResults = document.getElementById('searchResults');

    const searchHandler = event => {
      event.preventDefault();
      const query = searchInput.value;
      const results = performSearch(query);
      displayResults(results);
    };

    const performSearch = query => {
      // Perform search logic here...
    };

    const displayResults = results => {
      searchResults.innerHTML = '';
      for (let result of results) {
        const listItem = document.createElement('li');
        listItem.textContent = result;
        searchResults.appendChild(listItem);
      }
    };

    searchButton.addEventListener('click', searchHandler);
    searchInput.addEventListener('keydown', event => {
      if (event.key === 'Enter') {
        searchHandler(event);
      }
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、最初にフォームコントロールと検索結果要素を取得し、次に addEventListener メソッドを使用して、検索ボタンと検索入力ボックスのイベントハンドラーを追加します。

ユーザーが検索フォームを送信すると、デフォルトの動作 (この場合はページのリロード) が回避され、ユーザーのクエリのテキストが取得されます。クエリをperformSearch関数に渡し、結果をdisplayResults関数に渡します。

performSearch 関数では、任意の検索ロジックを実行して、クエリに一致する結果を返すことができます。この例では、検索結果をシミュレートするために偽のデータをハードコーディングしただけです。

displayResults 関数では、innerHTML を使用してすべての結果をクリアし、結果の配列を反復処理して結果ごとに li 要素を作成し、それを ul 要素に追加します。

最後に、ユーザーが入力ボックスで Enter キーを押して検索クエリを送信できるように、キーボードイベントリスナーを追加しました。

このシンプルな検索機能を実装することで、ユーザーにより良い Web サイトエクスペリエンスを提供し、必要な情報を簡単に見つけられるようになります。

以上が検索HTMLの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。