問題タブ [html-datalist]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
5273 参照

javascript - 入力[type=url]のデータリストをJavaScriptでプログラム的に表示させる

Chrome では、現時点ではデータリストは、input要素を入力またはダブルクリックした場合にのみ表示されます (例: http://jsfiddle.net/r7Y4v/ )。

データリストをより早く表示させようとしています。理想的には、入力の横に小さな「ドロップダウン矢印」を配置し、クリックするとデータリストが表示されるようにします。

Webkit ソリューションを探しています。

0 投票する
3 に答える
1396 参照

html - 動的に更新されたデータリストが表示されない

次のスクリプトを使用して、ユーザーの入力に応じて、html5 データリストを動的に更新しています。

データリストがすぐに表示されないことが多いことを除いて、これはうまく機能します。要素を検査すると、html はそこにありますが、データリストが更新されるとすぐに表示されません。どうすれば強制的に表示できますか?

記録のために:それは機能します...常に新しい提案がすぐに表示されることを願っています。

0 投票する
2 に答える
4405 参照

html - HTML5:1つのデータリストに対して複数の選択要素を取得する方法は?

<datalist>2 つの「1 つの果物」要素の果物をリストする 1 つの要素を取得しようとしました<select>

与えられたhtml:

<select> 2 番目のブレーク マイ コード (フィドル デモ)を含める。両方を同じデータリスト (または同様の値のリスト) で機能させるための処理方法。


編集: (@richard)<select />に修正<select></select>

0 投票する
1 に答える
308 参照

html - すべての単語のデータリスト検索

プロジェクトにデータリストを実装しましたが、機能します。ただし、私の問題はこの簡単なチュートリアルで確認できます。Explorerと入力してもInternet Explorerが見つからないのはなぜですか?

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

0 投票する
2 に答える
296 参照

xml - datalist データ属性を実装するブラウザはありますか?

HTML5 要素には、 filename.xml が次のように<datalist>なる属性があります。data="filename.xml"

ただし、これはまだ実装されていないようです (Chrome、Safari、Firefox、Opera を試しました)。ブラウザはそれを実装していますか? (もうすぐ?)

編集:ソース

0 投票する
1 に答える
6425 参照

html - Chromeで完全なデータリストドロップダウンリストを表示するには?

フォームがあり、そこにテキスト型のフィールドがあります。ユーザーが何かを入力したときに提案リストを表示したかったので、次のようにしました。

私が使用しているソフトウェア (CoffeeCup HTML Editor) のテスト ブラウザと、最新の Internet Explorer では、実際に動作します。しかし、これをChromeで実行すると、単純なテキストフィールドであり、ドロップダウンリストはありません
いずれかの要素の最初の文字を入力すると、リストが実際にポップアップ表示されますが、IE のように完全なリストが表示されると便利です。

クロムのために何か特別なことをしなければなりませんか?

クロム:

ここに画像の説明を入力

いいえ:

ここに画像の説明を入力

0 投票する
1 に答える
2274 参照

jquery - jqueryUI オートコンプリートとデータリストを一緒に

入力が 1 つの HTML 検索フォームがあります。入力フィールドには、エリア名、トレッキング名、その他のキーワードの 3 つを入力できます。

  • エリアはデータベースにないので、ユーザーのエリア名をオートコンプリートする入力にフックされたデータリスト フィールド (HTML) を持っているだけです。
  • トレックはDBからのものなので、JqueryUIのオートコンプリートがサーバーから名前をロードし、ユーザーが名前を選択すると、サイトは彼を正しいページに送ります。
  • ユーザーが何か他のものを入力して検索を押すと、フォームはユーザーを検索ページに送り、正しい結果を表示します。

私の問題は:

ユーザーがリストからエリア名を選択した場合、検索でユーザーをエリアページに送信する必要があります。jquery autocomplete には select プロパティがあります。datalist に似たようなものはありますか? オートコンプリートが 2 つの異なるリソースからロードするオプションがあるのではないでしょうか? (1 つのクライアントと 1 つのサーバー)

脚本:

よろしくお願いします

0 投票する
1 に答える
6005 参照

jquery - HTML5 データリスト - クリック イベントをシミュレートして、すべてのオプションを公開します

ボタンをクリックして入力要素にフォーカスを当てると、datalist html5 要素のすべてのオプションをユーザーに自動的に表示しようとしています。通常、ユーザーが関連するテキスト入力要素を 2 回クリックすると、すべてのオプションが表示されます。ユーザーが入力を開始する前にすべてのオプションを表示できるように、この動作をプログラムでシミュレートしたいと思います。

$('#text-input').focus();を使用してフォーカスを取得し(これは機能します)、jqueryを使用して.click()(1回と2回)、.dblclick()さらに.trigger('click')はjquery.simulate.jsを使用して、クリックとダブルクリックをシミュレートしようとしました。これらはすべて をトリガーし$('#text-input').click(function() {...});ますが、ブラウザーに表示されている入力要素の状態には実際には影響しません。

ここに私のHTMLがあります:

そして、dblclick試行を使用した私のコード:

0 投票する
2 に答える
1846 参照

javascript - 最初からではなく、コンテンツ内の任意の場所を検索する

これは MDN から取った例です。

現在、入力要素に E と入力しても、候補は表示されません。入力値要素が開始値ではなくオプション値のどこかにある場合に表示される提案が必要です。

JSBINで試してみる

出来ますか?現在、この機能を実現するために jquery Ui Autocomplete を使用しています。ありがとう。