問題タブ [html-datalist]

テキストフィールドをデータリストに接続したときに、テキストフィールドの値を提案することに関して、ブラウザーが異なれば動作も異なることに気付きました。一部のブラウザーでは、入力した内容で正確に始まるエントリが表示されます(IE、以前の chrome バージョン)、他のブラウザーでは、入力した内容を部分文字列として含むエントリが表示されます (firefox、新しい chrome バージョン)。

たとえばi、テキスト ボックスに次のように入力して、候補を確認します。

（または、 http://jsfiddle.net/yaj8ut3m/を好む場合は、ここにフィドルがあります）

IE では のみInternet Explorerが表示されますが、firefox と最近の chromeInternet ExplorerではFirefox、 、およびが表示されSafariます。

どの自動提案フィルタリング動作を使用するかを指定する方法はありますか?

注: JavaScript ソリューションは受け入れられません

データリストオプションに画像を追加することはできますか? Twitter や Facebook のように、データリストに名前と略歴とともにアバターを表示するユーザーの検索を構築しています。変数には、画像への$avatarリンクまたは src があります。

また、datalist は Safari でサポートされていないため、datalist に代わるものはありますか?

多くのオプションを含むデータリストがあります。リストが長すぎます。縦スクロールさせたいです。

ここでデモ 問題
FIDDLE

AJAX(JSON) を使用してデータリストを作成しているときに問題が発生しました。データリストからオプションを選択し、[FIND TIMESHEETS] ボタンをクリックして、選択したプロジェクト ID に基づいてさらに ajax 呼び出しを実行できるようにしたいと考えています。私のコードは次のようになります。

私のHTML

プロジェクトリストを正常に作成する私のAJAX

ボタンの ONCLICK イベント リスナー

私のアプリケーションには、次のような html5 データリストがあります。

input要素をreadonly次のように変更するまで、非常にうまく機能します。

次に、入力要素に焦点を合わせても何も起こりません...

仕様により、属性を持つテキスト入力listも読み取り専用であってはならないという仮定に達しました。「読み取り専用が必要な場合は、selectタグを使用してください」と言っているようなものです。この問題をさらに複雑にしているのは、このセットアップ ( を使用readonly) がこのアプリケーションで機能していたことはほぼ確実だと思います。残念ながら、最初の Web 検索では答えが明らかになりませんでした。

私の仮定は正しいですか、それとも何かを見逃していますか?

オプションとカスタム属性を含むデータリストがあります。

ポップアップで表示されます。ポップアップが値を閉じると、関数でカスタム属性値を使用する必要があります...

私は試した：

何も機能しません。

on-event を使用して値を取得できますが、それはオプションではありません。