データリストを使用してライブ検索ボックスに入力しています。ボックスはデータベースから都市を検索し、データリストにはユーザーが入力すると変化する最大10の候補が入力されている必要があります。
ただし、表示される提案は、データリストのオプション項目と完全には一致していません。表示できるのはそのうちのいくつかだけです。たとえば、ニューヨーク市を検索するとします。最初の提案は、「新規」の入力が完了するまで表示されません。表示される都市は「ニューグラスゴー」と「ニューウェストミンスター」です。ソースコードを見ると、データリストには実際に開始する10の都市が入力されていることがわかります。 「新規」で。
<input type="text" list="searchResults">
<datalist id="searchResults">
<option value="New Glasgow"></option>
<option value="New Westminster"></option>
<option value="New Milton"></option>
<option value="New Malden"></option>
<option value="New Amsterdam"></option>
<option value="New Delhi"></option>
<option value="New Kingston"></option>
<option value="New Yekepa"></option>
<option value="New Plymouth"></option>
<option value="New Corella"></option>
</datalist>
「NewY」は「NewYekepa」を表示し、データリストには「New Yekepa」、「West New York」、「East New York」、「NewYorkCity」が表示されます。「NewYo」から「NewYork」までは「NewYorkCity」しか表示されませんが、もちろんソースコードにはEastとWestが含まれています。
これはChromeにあります。Firefoxで試してみると、少し良く機能し、より多くの結果が表示されました。データリストのどこにあるかを確認できるのは、10個すべての場合もあれば、10個のうち7〜8個だけの場合もあります。