JavaScriptで自動補完入力ボックス機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptで自動補完入力ボックス機能を実装するにはどうすればよいですか?

WBOY

リリース： 2023-10-20 12:39:11

オリジナル

926 人が閲覧しました

JavaScript 如何实现自动补全输入框功能？

JavaScript で自動補完入力ボックス機能を実装するにはどうすればよいですか?

Web 開発では、オートコンプリート入力ボックスは非常に一般的な機能であり、高速、便利、正確な入力方法を提供し、ユーザーエクスペリエンスを向上させることができます。この記事では、JavaScript を使用してオートコンプリート入力ボックス機能を実装する方法と、具体的なコード例を紹介します。

1. HTML 構造

まず、入力ボックスを含む HTML 構造を準備する必要があります。例は次のとおりです。

<input type="text" id="autocomplete-input" placeholder="请输入关键字">
<ul id="autocomplete-list"></ul>

ログイン後にコピー

上記の例では、<input> 要素を入力ボックスとして使用し、ID を「autocomplete-input」に設定し、プレースホルダー属性。さらに、<ul> 要素をオートコンプリートプロンプトリストとして使用し、ID を「autocomplete-list」として設定します。

2. JavaScript の実装

次に、自動補完機能を実装するための JavaScript コードを記述する必要があります。まず、入力ボックスの入力イベントをリッスンし、ユーザーが入力したキーワードを取得する必要があります。次に、入力されたキーワードに関連するデータを Ajax リクエストを通じて取得し、オートコンプリートプロンプトリストに表示できます。

以下は簡単な実装例です:

// 获取输入框和提示列表
var input = document.getElementById('autocomplete-input');
var list = document.getElementById('autocomplete-list');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  var keyword = input.value;
  
  // 发送请求获取与关键字相关的数据
  // 这里可以根据实际情况进行后端接口的调用
  
  // 示例中使用一个静态的数据源来模拟请求
  var data = ['apple', 'banana', 'orange', 'grape', 'pineapple'];
  
  // 清空提示列表
  list.innerHTML = '';

  // 遍历数据，在提示列表中插入匹配的项
  for (var i = 0; i < data.length; i++) {
    if (data[i].indexOf(keyword) !== -1) {
      var item = document.createElement('li');
      item.textContent = data[i];
      list.appendChild(item);
    }
  }
});

ログイン後にコピー

上の例では、まず入力ボックスとプロンプトリストの DOM 要素を取得し、addEventListener を使用します。入力をリッスンするメソッドボックスの入力イベント。イベントハンドラー関数では、value 属性を通じてユーザーが入力したキーワードを取得します。

その後、Ajax リクエストを送信して、キーワードに関連するデータを取得できます。この例では、コードを簡素化するために静的データソースを使用してリクエストをシミュレートしていますが、具体的な実装では実際の状況に応じてバックエンドインターフェイスを呼び出す必要があります。

次に、データ配列をループして、キーワードに一致する項目をプロンプトリストに挿入します。 <li> 要素を作成し、textContent 属性を使用してそのテキストコンテンツを設定し、最後にそれをプロンプトリストに追加します。

3. スタイルの美化

最後に、オートコンプリートプロンプトリストを美化して、ユーザーエクスペリエンスを向上させることができます。 CSS を使用してプロンプトリストのスタイルを設定できます。例:

#autocomplete-list {
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

#autocomplete-list li {
  padding: 5px;
  cursor: pointer;
}

#autocomplete-list li:hover {
  background-color: #f1f1f1;
}

ログイン後にコピー

上の例では、プロンプトリストの境界線のスタイル、リストスタイル、パディング、最大高さ、およびスクロールバーを設定します。

上記の手順により、簡単なオートコンプリート入力ボックス機能を実装できます。ユーザーがキーワードを入力すると、関連するデータが自動的に検索され、一致する項目がプロンプトリストに表示されます。ユーザーはマウスまたはキーボードを使用して項目を選択し、自動的に完了することができます。

上記の例は単なる単純な実装であり、実際の状況では、より複雑な処理ロジックとバックエンドインターフェイスの連携が必要になる場合があることに注意してください。ただし、上記の原則と例を理解することで、オートコンプリート入力ボックス機能をより適切に実装およびカスタマイズすることができます。

以上がJavaScriptで自動補完入力ボックス機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。