問題タブ [html-datalist]

(私はそれを見つけることができませんが、それを検索する方法が本当にわかりません。)

オートコンプリートを使用<input list=xxx>して取得したいのですが、標準のように見える「で始まる」のではなく、「含む」アプローチですべてのオプションを一致させるブラウザが必要です。<datalist id=xxx>方法はありますか？

単純ではないにしても、ブラウザが一致した提案ではなく、表示したい提案を強制的に表示する方法はありますか? 「foo」と入力していて、オプション「bar」と「baz」を表示したいとしましょう。ユーザーにそれらを強制できますか? データリストにそれら (JS を使用) を入力した場合でも、ブラウザは「開始」チェックを実行し、それらを除外します。

データリスト オプションの表示方法を完全に制御したい。UI、柔軟性、アクセシビリティなどについてではないので、完全に作り直すつもりはありません。jQuery プラグインを提案することさえしないでください。

フォーム要素の検証を完全に制御できるのであれば、なぜオートコンプリートを使用しないのでしょうか?

編集: Firefox が 'contains' アプローチを使用していることがわかりました...それは標準でさえありませんか?? これを強制する方法はありますか？Firefox のやり方を変えることはできますか?

編集：私が欲しいものを説明するためにこれを作りました：http://jsfiddle.net/rudiedirkx/r3jbfpxw/

• HTMLWG の仕様[list]
• W3のスペックdatalist
• DavidWalsh の例
• HONGKIATの行動まとめ..？

こんにちは皆さん、データリストと組み合わせた HTML5 入力があります。入力ボックスをクリックまたは入力したときにリスト全体を表示する方法はありますか。

例えば、

データリストとオプション {ab,ac,bb,bc} を含む入力

a と入力すると、ab と ac のみが表示されます。すべてのオプションを引き続き表示したいと思います。

クロムでは、クリックしてデータリスト全体を表示できる小さな矢印がありますが、Firefox ではそうではありません。

これをFirefoxで行う方法はありますか？

HTML - autocomplete = false を試しましたが、データリストには影響しません

http://jsfiddle.net/qapsjxx7/

コントローラ

このリンクを確認してくださいhttp://jsbin.com/jifibugeke/1/edit?html,js,console,output

上記のデータリストのサンプルコードとangularjsを使用したURLについて言及しました。ここで私の問題は、テキストボックスに入力しているものです。

datalistw3 datalist要素の仕様で示されているように、古いブラウザ用のフォールバックが組み込まれた要素を実装しようとしています:

ただし、<input type="text">と のdatalist両方を同じ名前 (フォールバックに必要) で組み合わせると、"sex" パラメーターがクエリ文字列に 2 回表示されます。

SO コード スニペットではフォーム送信が機能しなかったため、代わりにこのフィドルを参照してください。「男性」を送信すると、ネットワーク タブに、送信時に という要求が表示されますhttp://www.example.com/?sex=male&sex=。

これにより、バックエンド コードで不安定な動作が発生します (残念ながら、現時点では変更できません)。フォールバックを維持しながら double パラメータを防ぐにはどうすればよいですか?

私は使用しています<datalist>

そして、AJAXを使用してリストを作成します

ただし、データリストの選択をクリックするとアクションを実行できません。たとえば、「Ref F」と入力して「Ref flowers」という項目が表示された場合、それをクリックすると実行する必要がありますイベント。

これどうやってするの？

一部のデータを自動入力するために、html データリストを使用しています。1 つのデフォルト値を除くすべてをフィルタリングする必要がある動作が必要です。以下はコード例です。

上記で、デフォルトでは、s を入力すると San Jose と San Francisco のみが表示され、n を入力すると New York のみが表示されます。

私の要件は、どのような場合でも、入力されたものは常に San Jose を表示し (デフォルトで)、残りの要素をフィルタリングする必要があるということです。

例: B を入力すると、San Jose と Boston の両方が表示されます。これは、San Jose がデフォルト値で、Boston が入力ボックスのフィルター処理された値であるためです。

これは可能ですか？そうでない場合、同じ結果を達成するための代替方法は何ですか?

JSFiddle

必要に応じて Javascript/Jquery を使用してもかまいません。ただし、オートコンプリート プラグインは使用できません。

ボタンをクリックして HTML テーブルに行を動的に追加しようとしています。

私のテーブルには、HTML5 datalist 要素を持つ列があります。ページがデフォルトの最初の行で最初にロードされたときに、データリストにドロップダウン値が表示されます。

しかし、ボタンによって追加されたすべての新しい行に対して、データリストは機能しません。以下は、行を追加しているテーブルと JavaScript です。JavaScript の innerHTML は、IE の datalist 要素に対して機能していないようです。HTML5 要素に対して innerHTML を機能させるための回避策はありますか?

HTML:

JavaScript:

現在、次のコードを使用していますが、Chrome では約 10 秒、IE11 では約 2 分かかります。

私はこのチュートリアルを読んでいました: http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-elementこれは、大量を扱うときにそのように ajax を使用することを提案しましたが、大が 100 個のアイテムを指すかどうかはわかりません。 100,000 アイテム。

request.responseTextに置き換えることでこれを辞書で機能させようとしましたがJSON.parse(JSON.stringify(dict));、ファイルにないため、最初に要求を行うのに問題が発生しています。

どうすればいいですか？これに DataList を使用すべきではない場合、どの代替手段をお勧めしますか?

前もって感謝します。