Autocomplete + verstecktes Feld in jquery?

Question

Ich versuche eine Autovervollständigung durchzuführen, die etwas anzeigt und dann etwas anderes in ein verstecktes Feld bei der Auswahl legt.

Beispiel:

In meiner Datenbank habe ich {[1, 'john'], [2, 'bob'], [3, 'john']}

Wenn der Benutzertyp ‚jo‘ und klickt auf den ersten ‚john‘, ich habe keine Möglichkeit zu wissen, auf welcher Eintrag er geklickt hat. Also brauche ich eine Art verstecktes Feld, um damit umzugehen.

Gibt es ein jquery plugin, das das tut oder muss ich mein eigenes erstellen?

Ich begann bereits und es funktioniert gut mit lokalen Werten, aber wenn ich sie asynchron bekommen muss, funktioniert es noch nicht. Ich basiere meine auf this plugin from bassistance. Ich denke, ich könnte meine Hände in den Code bekommen und die Art ändern, wie sie mit den Antworten umgehen, aber es würde mir etwas Zeit sparen, wenn etwas bereits erledigt wäre!

Answer 1

Sie können result handler verwenden und den gewünschten Wert auf dem versteckten Eingang speichern.

Answer 2

Nach lang nur auto-complete Suche fand ich die benimmt sich, wie Sie beschrieben: Facelist

Answer 3

Ich weiß, das ist alt, aber hier ist das, was ich tun, um ein verstecktes Feld mit einem einzigartigen bevölkert zu haben ID, die nie angezeigt und präsentieren dem Anwender ein Autocomplete-Feld wird die auf dem Display Werten basiert:

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

Wahrscheinlich dieser der Trick helfen würde, ist falsch nach dem select-Ereignis zurückzukehren. Dies würde das Auswahl-Dropdown schließen und Ihre Änderungen an der versteckten/Textbox bleiben sichtbar.

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