Bootstrap typeahead: mostra il testo diverso in confezione una volta selezionato

Question

Sto usando typeahead bootstrap per la ricerca in questo modo:

$('.lookup').typeahead({ 

source: function (query, process) { 
    return $.getJSON(
     'json_autocomplete.php',{ query: query }, 
     function (data) { 

      var newData = []; 
       $.each(data, function(){ 

        newData.push(this.label); 
        //populate hidden field with id 
        $('#contact_id').val(this.id); 

       }); 

      return process(newData); 

     }); 
} 

}); 

I dati JSON è simile al seguente:

[{"label":"Contact: Jeff Busch-> Busch, Jeff: 1975-11-24","value":"Busch, Jeff","id":"2096"}, ... 

Si sta lavorando molto. Quando l'utente inizia a digitare i dati "etichetta" viene visualizzato in un elenco sotto l'input. TUTTAVIA, una volta che l'utente fa clic su uno degli elementi dell'elenco, voglio che il testo "valore" appaia nella casella di testo di input, non tutte le informazioni sull'etichetta che sono state cercate!

È possibile?

Ecco un violino:

http://jsfiddle.net/michels287/qdgo651h/

Answer 1

io vi consiglio vivamente l'aggiornamento a https://github.com/bassjobsen/Bootstrap-3-Typeahead E 'l'esatto stessa buona typeahead bootstrap 2.x vecchio, appena tenuto e bugfixed nel proprio repository poiché bootstrap 3.0 ha saltato il typeahead in favore di typeahead.js (che BTW non è più mantenuto affatto). Questo renderà la vita molto più facile per te.

Dopo di che è possibile saltare tutte le contorsioni e semplicemente fare questo:

$('#contact').typeahead({ 
    source: jsonData, 
    displayText: function(item) { 
    return item.label 
    }, 
    afterSelect: function(item) { 
    this.$element[0].value = item.value 
    } 
}) 

aggiornato violino ->http://jsfiddle.net/qdgo651h/1/

---

Aggiornato ogni commento. Credo che complicare la source parte

$('.lookup').typeahead({ 
    displayText: function(item) { 
     return item.label 
    }, 
    afterSelect: function(item) { 
     this.$element[0].value = item.value 
    }, 
    source: function (query, process) { 
    return $.getJSON('json_autocomplete.php', { query: query }, function(data) { 
     process(data) 
    }) 
    } 
}) 

dovrebbe farlo. Aggiornato il violino dal commento qui sotto ->http://jsfiddle.net/hwbnhbdd/1/ È possibile utilizzare http://myjson.com/ come sorgente AJAX in violini come nell'aggiornamento.

Answer 2

Basta restituire i dati sull'evento di aggiornamento in questo modo:

updater: function (item) { 
     $('#id').val(map[item].id); 

     //Here we return the text to display on the input control 
     return map[item].autocomplete; 
    },