Bootstrap wpisywanie znaków z wyprzedzeniem: pokaż inny tekst w oknie po wybraniu

Używam startowej wpisywanie znaków z wyprzedzeniem, aby szukać tak:Bootstrap wpisywanie znaków z wyprzedzeniem: pokaż inny tekst w oknie po wybraniu

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

     }); 
} 

});

dane JSON wygląda następująco:

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

To działa świetnie. Kiedy użytkownik zaczyna pisać, dane "etykiety" są wyświetlane na liście pod danymi wejściowymi. JEDNAKŻE, gdy użytkownik kliknie jeden z elementów listy, chcę, aby tekst "wartości" pojawił się w polu tekstowym wejściowym, a nie wszystkie informacje o etykiecie, które zostały przeszukane!

Czy to możliwe?

Oto skrzypce:

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

Źródło

2016-03-31 chris.cavage

Co robi twój html wygląda? Czy to jedyny skrypt? Może jsfiddle? – whipdancer

Przepraszam. Stworzyłem skrzypce do demonstracji. Podoba mi się, jak informacje o "etykiecie" są pokazywane na ekranie w dół, gdy działa typahead, ale po wybraniu elementu chciałbym mieć tylko informacje o wartości, które pojawią się w danych wejściowych. Zaktualizowałem moje oryginalne pytanie z użyciem skrzypiec, które mam nadzieję, pomoże. –

będę zalecamy uaktualnienie do https://github.com/bassjobsen/Bootstrap-3-Typeahead To dokładny sam stary dobry wpisywanie znaków z wyprzedzeniem bootstrap 2.x, tylko utrzymane i bugfixed we własnym repozytorium ponieważ bootstrap 3.0 pominął typohead na korzyść typeahead.js (który BTW nie jest już w ogóle utrzymywany). To znacznie ułatwi ci życie.

Po tym można pominąć wszystkie contortions i po prostu to zrobić:

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

zaktualizowaną skrzypce ->http://jsfiddle.net/qdgo651h/1/

Updated za komentarz. Sądzę, że powinieneś złożyć zbyt dużo kompilacji, aby wykonać tę operację. Zaktualizowane skrzypce z poniższego komentarza ->http://jsfiddle.net/hwbnhbdd/1/ Możesz użyć http://myjson.com/ jako źródła AJAX w skrzypcach jak w aktualizacji.

Źródło

2016-04-01 09:47:48 davidkonrad

Dziękuję. Próbuję dostosować twój kod do mojego projektu. Zrobiłem to skrzypce jako przykład. Jednak zdalnie pobierasz dane dla mojego komputera z AJAX i zwracam informacje jako JSON. Nie wiem, jak skopiować to w skrzypcach z ajaxem, ale pokazuję ci w tym nowym skrzypcach kod, którego używam. Jeśli spojrzysz na to, załóżmy, że dane JSON na górze są tym, co powraca wywołanie ajax. Zaktualizowałem również odniesienia do bootstrap typeahead 3 na twoje żądanie. Jak mogę zrobić to samo w skrzypcach z moją prośbą o ajax? http://jsfiddle.net/michels287/hwbnhbdd/ –

@ chris.cavage, OK - patrz aktualizacja. – davidkonrad

Tak, zbytnio to skompilowałem! Cóż za pomoc! Dziękuję bardzo! –

Wystarczy zwrócić dane na razie Updater tak:

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

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

Źródło

2017-03-18 10:30:41 Nickholas

Bootstrap wpisywanie znaków z wyprzedzeniem: pokaż inny tekst w oknie po wybraniu

Odpowiedz

Powiązane problemy