Próbuję znaleźć działający przykład twitterowego elementu typu bootstrap , który wykona wywołanie ajax w celu zapełnienia menu rozwijanego.
Mam istniejący działający przykład autouzupełniania jquery, który definiuje adres URL ajax do i sposób przetwarzania odpowiedzi
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Co muszę zmienić, aby przekonwertować to na przykład?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Zaczekam na rozwiązanie problemu „ Dodaj obsługę źródeł zdalnych dla typeahead ”.
Odpowiedzi:
Edycja: typeahead nie jest już dołączany do Bootstrap 3. Sprawdź:
Począwszy od wersji Bootstrap 2.1.0 do 2.3.2, możesz to zrobić:
Aby wykorzystać dane JSON w następujący sposób:
Zauważ, że dane JSON muszą być odpowiedniego typu MIME (application / json), więc jQuery rozpoznaje je jako JSON.
źródło
get
zamiastgetJSON
? Wydaje się bardziej odpowiednie.Możesz użyć widelca BS Typeahead, który obsługuje wywołania ajax. Następnie będziesz mógł napisać:
źródło
["aardvark", "apple"]
. Musiałem wyraźnie ustawićdataType
parametr w$.post
wywołaniu. Zobacz jQuery.post () .Content-type
nagłówek naapplication/json
source
funkcji do wykonania.Począwszy od Bootstrap 2.1.0:
HTML:
JavaScript:
Teraz możesz utworzyć zunifikowany kod, umieszczając linki „żądanie json” w kodzie HTML.
źródło
$(this)[0].$element.data('link')
.this.$element.data('link')
Wszystkie odpowiedzi odnoszą się do typu BootStrap 2, który nie jest już obecny w BootStrap 3.
Dla każdego, kogo tu skierowano, szukającego przykładu AJAX za pomocą nowego postahead.js po uruchomieniu Bootstrap , oto działający przykład. Składnia jest nieco inna:
W tym przykładzie użyto zarówno sugestii synchronicznej (wywołanie processSync ), jak i asynchronicznej, więc niektóre opcje pojawią się natychmiast, a inne zostaną dodane. Możesz po prostu użyć jednego lub drugiego.
Istnieje wiele możliwych do powiązania zdarzeń i kilka bardzo potężnych opcji, w tym praca z obiektami zamiast ciągami, w którym to przypadku użyłbyś własnej funkcji wyświetlania do renderowania swoich elementów jako tekstu.
źródło
["Thing 1","Thing 2"]
Lub z niestandardową funkcją wyświetlania, tablicę obiektów według twoich potrzeb, np.[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
, teraz chcę pokazać dwie kolumny w rozwijanym menu z id i etykietą. Jak mogę to zrobić?Rozszerzyłem oryginalną wtyczkę TypeAhead Bootstrap o funkcje ajax. Bardzo łatwy w użyciu:
Oto repozytorium github: Ajax-Typeahead
źródło
JSON
wyglądać strona serwera ? DostajęUncaught TypeError: Cannot read property 'length' of undefined
. Używamjson_encode($array)
i wysyłam odpowiednie nagłówki ('Content-Type: application/json; charset=utf-8'
). wersja jqueryjQuery v1.9.1
Wprowadziłem kilka zmian w pliku jquery-ui.min.js:
i dodaj następujące css
Działa idealnie.
źródło
Używam tej metody
źródło
Można nawiązywać połączenia za pomocą Bootstrap. W bieżącej wersji nie występują problemy z aktualizacją źródła. Problemy z aktualizacją typowego źródła danych Bootstrap z odpowiedzią post , tzn. Źródło aktualizacji po aktualizacji można ponownie zmodyfikować.
Przykład znajduje się poniżej:
źródło
Do osób poszukujących coffeescriptowej wersji zaakceptowanej odpowiedzi:
źródło
Przejrzałem ten post i wszystko nie chciałem działać poprawnie i ostatecznie poskładałem bity razem z kilku odpowiedzi, więc mam w 100% działające demo i wkleję go tutaj w celach informacyjnych - wklej to do pliku php i upewnij się, że dołączone są w dobre miejsce.
źródło
Wypróbuj to, jeśli twoja usługa nie zwraca odpowiedniego nagłówka typu treści aplikacji / json:
źródło
AKTUALIZACJA: Zmodyfikowałem swój kod za pomocą tego widelca
także zamiast używania $ .each zmieniłem na $ .map, jak zasugerował Tomislav Markovski
Dostaję jednak pewne problemy
jak widać w nowym poście, staram się tutaj znaleźć
mam nadzieję, że ta aktualizacja pomoże ci ...
źródło
Array.map
Zamiast tego użyłbym$.each
i zastąpiłbym treść całejsuccess
funkcji wywołania zwrotnegovar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });
Nie mam dla ciebie działającego przykładu ani nie mam bardzo czystego rozwiązania, ale powiem ci, co znalazłem.
Jeśli spojrzysz na kod JavaScript dla TypeAhead, wygląda to tak:
Ten kod używa metody „grep” jQuery w celu dopasowania elementu w tablicy źródłowej. Nie widziałem żadnych miejsc, w których można by nawiązać połączenie AJAX, więc nie ma „czystego” rozwiązania tego problemu.
Jednak jednym z dość pospiesznych sposobów na zrobienie tego jest skorzystanie ze sposobu, w jaki metoda grep działa w jQuery. Pierwszym argumentem grep jest tablica źródłowa, a drugim argumentem jest funkcja używana do dopasowania tablicy źródłowej (zauważ, że Bootstrap wywołuje „dopasowujący”, który podałeś podczas inicjowania). To, co możesz zrobić, to ustawić źródło na sztuczną tablicę jednoelementową i zdefiniować moduł dopasowywania jako funkcję z wywołaniem AJAX. W ten sposób wywoła wywołanie AJAX tylko raz (ponieważ tablica źródłowa zawiera tylko jeden element).
To rozwiązanie jest nie tylko hackerskie, ale będzie miało problemy z wydajnością, ponieważ kod TypeAhead jest zaprojektowany do wyszukiwania za każdym naciśnięciem klawisza (wywołania AJAX powinny naprawdę występować tylko po kilku naciśnięciach klawiszy lub po pewnym czasie bezczynności). Radzę spróbować, ale trzymaj się innej biblioteki autouzupełniania lub używaj jej tylko w sytuacjach innych niż AJAX, jeśli napotkasz jakiekolwiek problemy.
źródło
gdy używasz ajax, spróbuj
$.getJSON()
zamiast$.get()
jeśli masz problemy z poprawnym wyświetlaniem wyników.W moim przypadku dostałem tylko pierwszy znak każdego wyniku, gdy go użyłem
$.get()
, chociaż użyłem stronyjson_encode()
serwera.źródło
używam
$().one()
do rozwiązania tego; Po załadowaniu strony wysyłam ajax do serwera i czekam na zakończenie. Następnie przekaż wynik do funkcji.$().one()
jest ważne. Ponieważ wymusza jednokrotne dołączenie pliku typehead.js do danych wejściowych. przepraszam za złe pisanie.źródło
?>
źródło