jqueryのオートコンプリート+隠しフィールド？

Question

何かを表示してから、選択の非表示フィールドに他の何かを配置するオートコンプリートを実行しようとしています。

例：

私のデータベースには {[1、 'john']、[2、 'bob']、[3、 'john']}

があります

ユーザーが「 jo 」と入力して最初の「 john 」をクリックした場合、どのエントリをクリックしたかを知る方法がありません。したがって、これを処理するには、何らかの関連する隠しフィールドが必要です。

これを行うjqueryプラグインはありますか、それとも独自のプラグインを作成する必要がありますか？

すでに開始しており、ローカル値で正常に機能していますが、非同期で取得する必要がある場合はまだ機能しません。私はこのプラグインのベーシスタンスに基づいています。私はコードを手に入れて、応答を処理する方法を変更できると思いますが、既に何かが行われていれば時間を節約できます！

Answer 1

結果ハンドラを使用して、目的の値を隠された入力。

Answer 2

これは古いことは知っていますが、非表示フィールドに表示されない一意のIDが入力され、表示値に基づくオートコンプリートフィールドがユーザーに表示されるようにするには、次のようにします。

<script type="text/javascript">
var picklist = [
    { id: "1", value: "One" }, 
    { id: "2", value: "Two" }, 
    { id: "3", value: "Three" }, 
    { id: "4", value: "Four" }
    ];

$().ready(function() {
 $("#pickValue").autocomplete(picklist, {
  minChars: 0,
  max: 12,
  autoFill: true,
  mustMatch: true,
  matchContains: false,
  scrollHeight: 220,
  formatItem: function(row, i, total) {
   return row.value;
  }, 
  formatResult: function(row) {
   return row.value;
  }
 });
 $('input#pickValue').result(function(event, data, formatted) {
  $('#pickID').val( !data ? '' : data.id);
 });
});
</script>

Answer 3

長時間の検索の後、オートコンプリートのみが、説明したとおりに動作することがわかりました。 フェイスリスト

Answer 4

おそらくこれは助けになるでしょう トリックは、selectイベントの後にfalseを返すことです。これにより、選択ドロップダウンが閉じられ、非表示/テキストボックスへの変更が表示されたままになります。

 <script type="text/javascript">
      $(document).ready(function(){
        $("#user_autocomplete").autocomplete({
          source: "http://localhost:3000/admin/users/emails_autocomplete",
          minLength: 3,
          delay: 1,
          select: function( event, ui ) {
            if (ui.item) {
              console.log("Selected: " + ui.item.value + " aka " + ui.item.label);
              $("#user_autocomplete").val(ui.item.label);
              $('#search_user_id_equals').val(ui.item.value);
            } else {
              // "Nothing selected, input was " + this.value );
            }
            return false;
          }
        });
      });

   ...........

<input class="hidden" id="search_user_id_equals" name="search[user_id_equals]" type="hidden" />

<div class="input select optional">
  <label for="user_autocomplete">User email</label>
  <input id="user_autocomplete" type="text" index="" class="ui-autocomplete-input string"
         autocomplete="off" role="textbox"
         aria-autocomplete="list" aria-haspopup="true"
         value=""
         />
</div>