問題タブ [html-datalist]

Chrome (デスクトップ) で動作する HTML5 データリストがありますが、Android と最新の Chrome で同じ入力を使用すると、オートコンプリートが機能しなくなります。

この機能は Android の Chrome ではサポートされていませんか?

データリストのさまざまなオプションのリストが表示される方法を変更したいと思います。それにいくつかの CSS プロパティを適用することは可能ですか?

私は試した

しかし、うまくいかないようです。

ユーザーがオートコンプリートリストから選択するたびにイベントをキャッチしようとしています。オプションタグにonClickイベントを入れてみましたが、起動しません。

コードは次のとおりです。

新しいもの<datalist>は一般的に非常に便利だと思いますが、提案が十分に表示されていないと思います. javascript を使用してデータリストの提案の表示をトリガーする方法はありますか?

例として、<input type="number">（jsFiddle）にデータリストがあります。

Chrome では、入力が空で、既にフォーカスがあり、ユーザーが入力をクリックした場合にのみ、提案の完全なリストが表示されます。下向き矢印は提案を表示しません。値を減らすだけです。

提案をもっと目に見える形にしたい。例として、候補のリストを開くボタンを追加しました。onClick-handler には何を入れますか?

この例では、Chrome、jQuery、および数値入力を使用しましたが、それらすべてに依存しない一般的なソリューションを好みます。

Chrome と Firefox の HTML5 データリスト要素の処理の間に問題が発生しています。

私はそれを悪用している可能性があります.Firefoxは私が期待する方法で処理していますが、Chromeはそうではありません. Opera では試していません。これは社内向けのページなので、使用しているブラウザを制御できます。

次のように、値と内部テキストを設定します。

サーバー側の値「OptionsList」は、データベース クエリから動的に作成されます。最終結果は、おおよそ次のようになります。

等

Firefox では、"S" の後に "A" (大文字と小文字を区別しない) を入力すると、上記の両方のエントリが表示されます。「W」を入力するか、マウスで Sawatdee を選択するとすぐに、テキスト ボックスに 234 が入力されます。これは、私が望んでいることです。Sawatdee ではなく 234 をサーバーに送り返したいからです。「A」を入力してから「T」を入力しても機能します。

Chrome では、必要なすべての文字を入力できますが、リストには何も表示されません。ただし、2 を入力すると、2 番目のエントリのみが表示されます。しかし、リストには 2 の後に Sawatdee が表示されます。

データリストを過度に使用/悪用していますか、それとも Chrome に問題がありますか? または、Chrome は技術的に想定されているとおりに処理しており、Firefox のバグを見つけましたか?

データリストを使用してライブ検索ボックスに入力しています。ボックスはデータベースから都市を検索し、データリストにはユーザーが入力すると変化する最大10の候補が入力されている必要があります。

ただし、表示される提案は、データリストのオプション項目と完全には一致していません。表示できるのはそのうちのいくつかだけです。たとえば、ニューヨーク市を検索するとします。最初の提案は、「新規」の入力が完了するまで表示されません。表示される都市は「ニューグラスゴー」と「ニューウェストミンスター」です。ソースコードを見ると、データリストには実際に開始する10の都市が入力されていることがわかります。 「新規」で。

「NewY」は「NewYekepa」を表示し、データリストには「New Yekepa」、「West New York」、「East New York」、「NewYorkCity」が表示されます。「NewYo」から「NewYork」までは「NewYorkCity」しか表示されませんが、もちろんソースコードにはEastとWestが含まれています。

これはChromeにあります。Firefoxで試してみると、少し良く機能し、より多くの結果が表示されました。データリストのどこにあるかを確認できるのは、10個すべての場合もあれば、10個のうち7〜8個だけの場合もあります。

例えば：

データリストのアイテムが選択されたときにイベントをキャッチすることは可能ですか? 入力要素で onclick または onchange を呼び出しても機能しません。

JSON データに基づいてデータリストを作成し、オートコンプリート フィールドを作成したいと考えています。

このチュートリアルのおかげで、次のことがうまくいきました。

この json データ:

このコードを使用してうまく解析できます: $(document).ready(function() {

オートコンプリートは、リンク先の例に従って機能します。

これをデータソースとして解析しようとしています:

データリストで「ボディ」をオートコンプリートしようとしています。このより複雑な json データで動作させる方法がわかりません。

データリストに長い要素のセットがある場合、それらはすべて、横にスクロールバーが表示されます。トップ5だけを表示し、他のトップ5だけを切り取る簡単な方法はありますか？

例： http： //jsfiddle.net/yxafa/