input - 入力フィールド内で直接オートコンプリート

Question

ウェブサイトにオートコンプリートシステムを追加したいのですが、しばらく検索しましたが、探しているものが見つかりませんでした。説明するのは難しいです。

内部で入力を直接オートコンプリートするシステムが欲しいです。Googleは「一般的な」オートコンプリートとこれを使用していますが、他の誰もこのようなことに取り組んでいないようです!

シンプルで論理的なもの...そして、存在しない場合、どうすればこのようなことを行うことができますか?

Google システムは次のとおりです。

score 2 · Accepted Answer

解決策は、入力ボックスの上に div を灰色のテキストで配置することです。これにより、最初のオートコンプリートオプションとテキストボックス内の現在のテキストとの違いが示されます。

キーを押すと、一般的なオートコンプリートにより、一致するアイテムのリストが生成されます。最初のものを取り、選択したスタイルを彼に設定し（.addClass（）を使用して）、テキストボックスのコンテンツと最初のアイテムのコンテンツの違いを取り、灰色のdivに配置します。

デフォルトで最初のオプションを選択する興味深い拡張機能を見つけました。

$( el ).autocomplete({
      selectFirst: true
});

あなたはそれで遊んで、あなたのニーズに合わせて変更することができます. たとえば、「jquery.ui.autocomplete.selectFirst.js」ファイルに次のコードを追加できます。

if (menu.element.children().first().length == 1)
{
    $("#autocomplete").val(menu.element.children().first()[0].childNodes[0].childNodes[0].data);
}

選択するだけでなく、実際にテキストボックスに挿入します（注：できることの例を示しました。このコードだけでは十分ではありません）。

1 に答える 1