問題タブ [jquery-ui-autocomplete]

Rails アプリにjquery-ui オートコンプリートを実装する方法について助けが必要です。

ユーザーが顧客名を入力できるテキスト フィールドにオートコンプリートを追加したいと考えています。何百人もの顧客が存在する可能性があるため、提案されたオートコンプリート値をテーブルから「リモート」で取得する必要があります (少なくともこれは私が理解していることです)。

私が理解できていない主な点は、提案された値をオートコンプリート テキスト ボックスに提供する方法です。jquery-ui docs を読みましたが、この問題については少し難しいようです。

したがって、私が本当に求めているのは、Rails アプリでこれを機能させる方法の例であり、必ずしも JavaScript の構築方法の完全な説明ではありません (それは jquery-ui チームが私のために行ったことです =) )。

たとえば、オートコンプリート用のデータを準備する方法や、オートコンプリート機能をテキスト ボックスにアタッチする方法などです。

デフォルトでは、jQuery Uオートコンプリートは結果のリストを生成し、結果をクリックすると、クリックされた結果テキストがテキストフィールドに入力されます。

結果をクリックするとその結果のページに移動するように、この動作を変更したいと思います。ハイパーリンクを生成するために、結果のIDを渡すことができます。

PHP JSONを使用して、結果セットを戻しています。

そして、これが私の現在のjQueryです。

jQuery UI Autocomplete をいくつかカスタマイズしたいと思います。

1）結果が見つからない場合は、リストに「結果が見つかりません」と出力する必要があります。

2) 入力中に結果の文字を強調表示/太字にすることは可能ですか? たとえば、「ball」と入力して結果に「football」が含まれている場合は、foot ballとして出力する必要があります。

3) 上部に表示される結果が文字列の先頭と一致する可能性はありますか? たとえば、データベースに 3 つのエントリがあるとします。

• 占星術師
• 宇宙ステーション
• 星

「st」と入力し始めます。これにより、これら 3 つのエントリがこの順序で表示されます。でも、「スター」を最初の結果にしたいです。

結果を生成するために現在使用されている MySQL クエリは次のとおりです。

jquery uiダイアログ内でjquery uiオートコンプリートウィジェットを使用しています。検索テキストを入力すると、テキスト ボックスがインデントされますが (ui-autocomplet-loading)、候補は表示されません。

company は、オートコンプリートを添付するテキスト ボックスの ID です。

私はそれがaz indexかもしれないと思ったので、これを設定しました：

しかし、それはまだ表示されません。オートコンプリートを「通常の」ページに配置すると、正常に機能します。

jquery ui バージョン 1.8.2 を使用しています。どこを見るべきかのアイデアはありますか？

これは何度も聞かれていると思いますが、助けていただければ幸いです。

JSONから静的な結果リストを取得できるjQueryUIをセットアップしようとしています。ただし、実際に結果をフィルタリングできるように、INPUT値をPHPスクリプトに渡す必要があります。

入力フィールドのマイコード

Javascriptを実行するためのコード

そして、testData.phpは有効なJSONデータを返しています。しかし、入力フィールドからtestData.phpに変数を渡して、実際に何を検索するかがわかるようにする方法がわかりません。

これが理にかなっていることを願っています。

以下のコードでは、3つの異なるイベント（フォーカス、選択、変更）で同じ機能があります。これは冗長に思えますが、3つを1つに組み合わせる方法がわかりません。アイデアをよろしくお願いします！

jQuery のオートコンプリート ウィジェットを機能させるのに苦労しています。サーバーからのキーと値のペアのリストを使用しています。

次の要件があります。

ユーザーがウィジェットから値を選択した場合、ID をサーバーに渡したいと思います。

ユーザーが値を選択せず​​に生のテキストを入力するか、既に選択されている値を変更した場合、ID フィールドをクリアして生のテキストだけをサーバーに送信する必要があります。

someAjaxFunctionオートコンプリート ウィジェットが期待するオブジェクトの配列を返すと仮定します: {label:label, value:key}.

最初に、オートコンプリート ウィジェットを次のように設定しました。

アイテムの 1 つにカーソルを合わせて選択を変更すると、$(input) によって参照されるテキスト ボックス内のテキストが、ラベルではなく、基になるキーに変更されます。これは、ユーザー インタラクションの観点からは非常に望ましくありません。実際、私がこれを調査している理由は、私が構築しているサイトのユーザーが、入力したテキストが乱数に変わっているように見えることに一貫して困惑していたためです。

テキスト ボックスの下に隠しフィールドを追加し、次のように ID をクロークするために select() および focus() イベントを実装しました。

これは、ユーザーがオートコンプリート ドロップダウンによって提供されるスクリプトに固執している場合にうまく機能します。ID はクロークされ、サーバーに正しく送信されます。残念ながら、ユーザーがボックスに自由形式のテキストを入力し、その値に基づいて検索したい場合、ID フィールドはリセットされず、以前に選択した ID がサーバーに送信されます。これもかなり紛らわしいです。

jQuery UI Autocomplete のドキュメントには、changeイベントが一覧表示され、引数のitemプロパティが選択された項目に設定されると記載されています。uiキーを押すと非表示の ID フィールドをリセットし、オートコンプリートが変更された場合に ID を再入力できると考えました。残念ながら、 ID をリセットしてはならない一連のキー押下をキャプチャする keypress イベントに加えて、テキスト ボックス内のテキストを管理するために必要なreturn false上記のイベントのステートメントにより、イベントに ui.item が適切に割り当てられません。selectchange

だから今、私は立ち往生しています-ウィジェットがデフォルトでサポートする必要があると思われる機能をサポートするために他に何を試みることができるか本当にわかりません。このプロセスが本来よりもはるかに複雑であるか、本当に明白な何かが欠けています。利用可能なすべてのイベントとすべての例を選択しましたが、手ぶらで出てきました。実際、jQuery UI ページの「カスタム データと表示」の例でさえ、この問題に悩まされています。

これをカバーするためにサーバー側でいくつかのハックを追加できますが、クライアントレベルでこれを実行できることを本当に望んでいます.

また、別のウィジェットに切り替えるよりも、jQuery UI オートコンプリート ウィジェットに固執したいと思います。

jQuery.UI.autocompleteウィジェットを使用しています。オートコンプリート ウィジェットがバインドされているテキスト ボックスは、ページ (フォーム) のほぼ下部にあるため、ユーザーがそこに入力を開始すると、リストが画面の外に出てしまうため、ブラウザでページを下にスクロールして完全なリストを表示する必要があります。テキストボックスの上に十分なスペースがあります。

テキストボックスの下に十分な表示スペースがない場合 (通常のドロップダウンリストのように)、リストをロールダウンではなくロールアップする方法はありますか?

ええ、これは確かにjQueryUIオートコンプリートについての私の3番目または4番目の質問です。私の最近の悩みは、フォームの「送信」ボタンをクリックしても、jQueryの「変更」としてカウントされないように見えることです。入力ボックスが変更されると、jQueryはjavascriptを実行して、受け入れ可能な入力とその値のリストとの一致を強制します。

EmployeeNumber（非表示）入力にすでに値がある場合、無効な名前を入力してから入力ボックスをタブまたはクリックすると、この値がクリアされますが、代わりにフォームSubmitボタンをすぐに押すと、変更としてカウントされないようです。 'そしてPOSTデータには前のEmployeeNumber値が含まれています-間違った入力であるべきものを'一種の'正しいものにします！

[送信]をクリックすることも変更であることをjQueryに認識させる方法はありますか、それとも入力がクリックされSubmitたことをjQueryに通知するボタンを取得する方法はありますか？Resource

更新：

結局、私はかなりハッキーな方法と考える方法を使用してこれを回避しました-オートコンプリートボックスの「変更」イベントを放棄し、ユーザーが送信をクリックしたときに手動で一致させました。現在の仕組みでは、ユーザーがオートコンプリートのドロップダウンメニューをクリックして名前を選択すると、EmployeeNumber値にオートコンプリートのjQueryコードが入力されます。ユーザーが名前を入力して送信を押すだけの場合、代わりにforceCheck（）関数によって照合が行われます。もちろん、この関数は、2番目の同一の名前があるかどうかに関係なく、自動的に名と照合されますが、残念ながら、これまでに見た中で最も奇妙な癖のように見えますが、forループの終了後のコードは一致しませんループ内に「return」ステートメントがない場合でも、実行されます。ループが終了した後、送信要求は続行されます...それは非常に奇妙です。

誰かがこれよりも良い方法を知っているなら、私はあなたの答えを大いに感謝します-または私のforceCheck関数の残りが実行されない理由を知っているなら...そうでなければ、私は明日私自身の質問への答えとしてこの投稿を投稿します、できる限り受け入れます（2日後だと思います）。

最終更新：

ええと、24時間以上経ちました（かなり長い時間です）ので、私は自分の解決策を「答え」として投稿しました。あと数日置いておき、それでも他に答えがない場合は受け入れます。

jquery-ui を使用して入力ボックスをオートコンプリートし、選択した項目から非表示の値を設定しました。

これは私が

オプション（現在は間違っている可能性があります。コードは手元にありませんが、私の質問までは機能します...）

マウスでメニューからアイテムを選択すると機能しますが、テキストを入力してEnterでアイテムを選択すると、何も実行されず、オートコンプリート機能によって選択がまったく実行されないかのようになります。ただし、ボックスの外でタブを押すと、選択がトリガーされます。

私はフォーカスと変更を使用しました: 必要なフィールドも更新しますが、ユーザーが項目を選択することを確認するために、フォーカス、変更、選択のすべてを指定する必要がある場合、これはやり過ぎだと思います。実際に選択されるリスト。

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

rofly: jquery-ui オートコンプリートを使用しています。指定したコードがありますが、次のようになります (jquery.ui.autocomplete.js から)

それはすべてダンディに見えるので、これが原因で失敗するかどうかはわかりません.

私のコードはこのようなものです（document.read（）にラップされています

したがって、問題は、ユーザーがマウスでメニューから選択している場合、およびフィールドからタブアウトする場合（keyUp、keyDownを選択してからタブアウトする場合）に機能しますが、keyUp、keyDownでアイテムを選択してから入力し、何も起こりません！