Bootstrap typeahead: hiển thị văn bản khác nhau trong hộp khi được chọn

Question

Tôi đang sử dụng typeahead bootstrap để tìm kiếm như thế này:

$('.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); 

     }); 
} 

}); 

Các dữ liệu JSON trông như thế này:

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

Nó đang làm việc tuyệt vời. Khi người dùng bắt đầu nhập dữ liệu "nhãn" được hiển thị trong danh sách bên dưới đầu vào. BAO GIỜ, khi người dùng nhấp vào một trong các mục danh sách, tôi muốn văn bản "giá trị" xuất hiện trong hộp văn bản đầu vào không phải tất cả thông tin nhãn đã được tìm kiếm!

Điều này có khả thi không?

Dưới đây là một fiddle:

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

Answer 1

Tôi sẽ khuyên bạn nâng cấp lên https://github.com/bassjobsen/Bootstrap-3-Typeahead Đây là chính xác cùng tốt cũ typeahead bootstrap 2.x, chỉ cần duy trì và bugfixed trong kho riêng của mình kể từ khi bootstrap 3.0 bỏ qua các typeahead ủng hộ typeahead.js (BTW không còn được duy trì ở tất cả). Điều này sẽ làm cho cuộc sống dễ dàng hơn nhiều cho bạn.

Sau đó bạn có thể bỏ qua tất cả những vặn vẹo và chỉ cần làm điều này:

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

cập nhật fiddle ->http://jsfiddle.net/qdgo651h/1/

---

cập nhật mỗi nhận xét. Tôi tin bạn vượt quá số source phần

$('.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) 
    }) 
    } 
}) 

nên làm điều đó. Đã cập nhật fiddle từ nhận xét bên dưới ->http://jsfiddle.net/hwbnhbdd/1/ Bạn có thể sử dụng http://myjson.com/ làm nguồn AJAX trong các câu hỏi như trong bản cập nhật.

Answer 2

Chỉ cần trả lại dữ liệu trên các sự kiện cập nhật như thế này:

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

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