Automatische Vervollständigung + Verstecktes Feld in Jquery?

Question

Ich versuche, eine Autovervollständigung zu tun, dass etwas angezeigt wird und dann etwas anderes in einem versteckten Feld setzte auf Auswahl.

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 zugeordnet versteckten Feld zu handhaben.

Gibt es eine jQuery-Plugin, das dies tut oder muß ich meine eigene Gruppe gründen?

Ich habe bereits begonnen und es funktioniert mit lokalen Werten in Ordnung, aber wenn ich sie bekommen müssen asynchron funktioniert es noch nicht. Ich bin stützen Mine auf dieses Plugin von bassistance . Ich glaube, ich meine Hände in dem Code bekommen konnte und die Art und Weise sie die Antworten behandeln, aber es würde mir etwas Zeit sparen, wenn etwas geschehen!

Answer 1

Sie können die Ergebnis Handler und speichern Sie den gewünschten Wert auf die versteckter Eingang.

Answer 2

Ich weiß, das ist alt, aber hier ist es, was ich tue, um ein verstecktes Feld mit einer eindeutigen ID bevölkerte zu haben, die nie angezeigt und präsentieren den Benutzer ein Autocomplete-Feld, das 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 3

Nach langer Suche die einzige automatische Vervollständigung fand ich die verhält sich wie Sie ist beschrieben: Facelist

Answer 4

Wahrscheinlich würde dies helfen Der Trick ist falsch nach dem select-Ereignis zurückzukehren. Dies würde die dropdown und Ihre Änderungen an der versteckten / Textbox schließen sichtbar bleiben.

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