JavaScript は検索ボックスの関連付け機能をどのように実装しますか?

JavaScript 検索ボックスの関連付け機能を実装するにはどうすればよいですか?

最新の Web アプリケーションでは、検索ボックスは非常に一般的な要素であり、ユーザーは検索ボックスにキーワードを入力して関連コンテンツを見つけることができます。 Lenovo の機能は、基本的な検索機能に加えて、より便利な検索エクスペリエンスをユーザーに提供します。ユーザーが検索ボックスにキーワードを入力すると、関連する関連候補が自動的に表示され、ユーザーはその中から 1 つを選択するだけで検索できるため、検索の精度と効率が向上します。

この記事では、JavaScript を使用して、HTML、CSS、JavaScript を組み合わせて検索ボックスの関連付け機能を実装する方法を紹介します。以下に具体的なコード例を示します。

まず、HTML で検索ボックスと Lenovo 提案ボックスのコンテナーを作成する必要があります。

<input type="text" id="searchBox" placeholder="请输入关键词">
<div id="suggestionBox"></div>

上記のコードは、Lenovo のコンテナーとして input 要素と div 要素を作成します。提案箱。

次に、CSS を使用して検索ボックスと Lenovo 提案ボックスのスタイルを設定する必要があります。

#searchBox {
  width: 300px;
  height: 30px;
  padding: 5px;
}

#suggestionBox {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

上記のコードは、検索ボックスの幅、高さ、パディングを設定します。 Lenovo 提案ボックスの背景色、境界線のスタイル、および最大高さ。

これで、関連付け関数を実装するための JavaScript コードを作成できます。まず、検索ボックスと Lenovo 提案ボックスの DOM 要素を取得する必要があります:

const searchBox = document.getElementById('searchBox');
const suggestionBox = document.getElementById('suggestionBox');

次に、検索ボックスの入力イベントをリッスンする必要があります。ユーザーがコンテンツを入力すると、 Lenovo の提案を入力し、Lenovo の提案に表示します。ボックス内:

searchBox.addEventListener('input', function() {
  const keyword = searchBox.value;
  // 根据关键词获取联想建议的数据
  const suggestions = getSuggestions(keyword);
  
  // 清空联想建议框的内容
  suggestionBox.innerHTML = '';
  
  // 将联想建议添加到联想建议框中
  suggestions.forEach(function(suggestion) {
    const suggestionItem = document.createElement('div');
    suggestionItem.textContent = suggestion;
    suggestionItem.addEventListener('click', function() {
      searchBox.value = suggestion;
      suggestionBox.innerHTML = '';
    });
    suggestionBox.appendChild(suggestionItem);
  });
});

上記のコードでは、addEventListener メソッドを使用して検索ボックスに入力イベント リスナーを追加しました。ユーザーがコンテンツを入力すると、検索ボックスの値を取得し、getSuggestions 関数を呼び出して、Lenovo が提案するデータを取得します。次に、まず Lenovo 提案ボックスの内容をクリアし、次に Lenovo 提案を Lenovo 提案ボックスに順番に追加します。

最後に、関連付け提案項目ごとにクリック イベント リスナーを追加しました。ユーザーが関連付けの提案をクリックすると、その提案の値が検索ボックスに割り当てられ、関連付けの提案ボックスの内容がクリアされます。

ここまでで、検索ボックスの関連付け機能の実装が完了しました。ユーザーは検索ボックスにキーワードを入力できるようになり、システムは関連する関連性の候補を自動的に表示します。ユーザーは候補の 1 つを選択するか、検索するキーワードを入力し続けることができます。

上記は、JavaScript を使用して検索ボックスの関連付け機能を実装する詳細なコード例です。お役に立てれば！

以上がJavaScript は検索ボックスの関連付け機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。