Completamento automatico + Campo nascosto in jquery?

Question

Sto cercando di eseguire un completamento automatico che visualizzerà qualcosa e quindi inserirà qualcos'altro in un campo nascosto durante la selezione.

Esempio:

Nel mio database ho {[1, 'john'], [2, 'bob'], [3, 'john']}

Se l'utente digita ' jo ' e fa clic sul primo ' john ', non ho modo di sapere su quale voce ha cliccato. Quindi ho bisogno di una sorta di campo nascosto associato per gestire questo.

Esiste un plugin jquery che fa questo o devo crearne uno mio?

Ho già iniziato e funziona bene con i valori locali, ma se devo ottenerli in modo asincrono non funziona ancora. Sto basando il mio su questo plugin di bassistance . Immagino di poter mettere le mani nel codice e cambiare il modo in cui gestiscono le risposte, ma mi farebbe risparmiare un po 'di tempo se qualcosa fosse già stato fatto!

Answer 1

Puoi utilizzare gestore dei risultati e archiviare il valore desiderato sul input nascosto.

Answer 2

So che questo è vecchio ma ecco cosa devo fare per avere un campo nascosto popolato con un ID univoco che non viene mai visualizzato e presentare all'utente un campo di completamento automatico basato sui valori di visualizzazione:

<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

Dopo una lunga ricerca, l'unico completamento automatico che ho trovato si comporta come descritto: Facelist

Answer 4

Probabilmente questo aiuterebbe Il trucco è restituire false dopo l'evento select. Ciò chiuderebbe il menu a discesa di selezione e le modifiche apportate alla casella nascosta / di testo rimarranno visibili.

 <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>