問題タブ [html-datalist]

私はこの例を持っています：

ユーザーがオプション（マウスまたはキーボードを使用）を選択したときに、イベントをキャッチする必要があります。

やろうとしましたがonchange="MySuperFunction();"、これはアイテムが選択され、リストがフォーカスされていない場合にのみ機能します。

作業中の Web サイトに検索オートコンプリート機能を実装しようとしています。バックエンドMySQLデータベース（AJAXと通信）から動的に生成されたオプションで、HTMLデータリストを使用しています。ただし、データリストのオートコンプリートが思いどおりに機能しません。キーワードが適切でない場合、オートコンプリートは結果を自動的に無視するようです。

たとえば、「リンゴ バナナ オレンジ」という文字列を検索する場合、検索ボックスに「リンゴ オレンジ」と入力すると、バックエンドによって生成されたオプションの 1 つであっても、文字列は表示されません。

これはある種の固有のデータリスト機能であると想定しています。これを回避する方法があるかどうか、またはこの問題を克服する検索オートコンプリート機能を実装する方法について誰かが別のアイデアを持っているかどうか疑問に思っていましたか?

助けてくれてありがとう。

リスト要素のリスト プロパティの設定に行き詰まっています。

リスト属性が「リスト= {データリストのID}」ではないため、もちろんこれは機能しません。これを機能させる唯一の方法は、setAttribute を使用することです。

セッターを使用せずに、属性を直接変更することでこれを解決するにはどうすればよいですか?

編集：より良いスニペット。

私も言及したsel.list = idは、私のコードでは機能していません。

Dragonfly を見ると、setAttribute("list", id) がリスト属性を設定していないことがわかります。

言語のリストがあり、コンボボックスでコードを確認できます:

そして今、データリスト HTML を使用して、テキスト領域をコードでオートコンプリートしたいと考えています。私はこれを試しましたが、 @lang.langCode 値を取得しません:

ありがとうございました。

そのため、MySQL データベースの行を介して入力されているオブジェクトのキーの値から入力されている JavaScript 配列から HTML5 データリストを動的に入力するのに少し問題があります。ふぅ！

MySQL データベース => テーブル => 行 => JSON => Javascript オブジェクト => "firstname" & "lastname" キー => 名の配列 => データリスト オプション。

名前の配列を正常に作成しました。

そして、それらをデータリストに .append するループを設定します:

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

なぜこれが入力されていないのですか？

私が今持っているもの：

したがって、この HTML5 データリストには多数のオプションが含まれており、2 つのイベントが発生しています。1 つは、ユーザーが、「Rick Bross」や「Jack Johnson」(keyup) などのオプションに入力されている名前の配列に一致する何かを入力したときです。ユーザーが名前の入力を開始すると発生する別のイベントがポップアップし、ユーザーが下向き矢印を押して「Enter」(変更) を押します。

問題：

ユーザーがドロップダウン オプションの 1 つをクリックしたとき、フルネームを入力する前、オブジェクトがぼやける前に、イベントを発生させる必要があります。名前が完全に入力される前にユーザーが 1 つをクリックすると、2 つのイベントは、入力がぼやけているときにのみ関数を起動します。

マークアップ:

Javascript イベントと関数: