2014-04-07 29 views
5

używam Typeahead.js dla moich Automatyczne sugestie, mój kod jest:Typeahead.js - prefetch generowane dynamiczne php json

var job_scopes = new Bloodhound({ 
    datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.value); 
    },queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 100, 
    remote: { 
     url: 'http://www.domain.com/json.php?action=job_title&q=%QUERY' 
    } 
}); 

job_scopes.initialize(); 

Działa to dobrze, ale chciałbym zmienić go na prefetch, aby być mogę używać tokens w moim JSON i pozostawić powracające wyniki na podstawie tokenów na Bloodhound.

Nie mogę po prostu utworzyć statycznego JSON-a, ponieważ wszystkie elementy sugestii są dodawane do db przez cały czas.

Czy istnieje sposób na dynamiczne pobieranie wstępne json?

+0

Czy moja odpowiedź pomogła. Naprawiłeś swój problem? –

Odpowiedz

1

Napisałem przykład Typeahead przy użyciu prefetch. Ten przykład pobiera dane JSON ze zdalnego źródła:

http://jsfiddle.net/Fresh/1hrk0qso/

Aby preselekcji JSON ze zdalnego źródła, przedmiotem Bloodhound był realizowany w następujący sposób:

var countries = new Bloodhound({ 
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: { 
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json', 
    filter: function (countries) { 
     return $.map(countries, function (country) { 
      return { 
       name: country 
      }; 
     }); 
    } 
} 
}); 

Będziesz wymienić URL do statyczny plik JSON (pokazany w powyższym kodzie) z adresem URL, który zwraca dynamicznie wygenerowany JSON.

Kluczowym kodem jest tutaj funkcja "filtra", która odwzorowuje płaskie tokeny JSON na tablicę obiektów JavaScript, która jest tym, co Typeahead musi obsługiwać.

1

Z dokumentacji: "Chociaż można pozbyć się go w przypadku mniejszych zestawów danych, dane wstępnie zapisane nie mają zawierać całych zestawów danych, a raczej powinny służyć jako podpowiedzi pierwszego poziomu dla sugestii. Pamiętaj o tym ostrzeżeniu, ryzykujesz trafienie w lokalne limity magazynowania. "

https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#prefetch

Nie wiem ile masz pobierania danych, ale może być lepiej, aby wywołanie ajax, aby uzyskać dane, a następnie załadować że na swojej Bloodhound przykład gdy pojawi się odpowiedź.

Oto przykład przy użyciu jQuery wywołanie ajax:

//Let's assume that the data you get back from the server is an array of objects 
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}]; 

$.get("http://example.com/your-data", function(data) { 
    var bh = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: data 
    }); 

    var dataset = { 
    name: "My-dataset-name", 
    displayKey: "value", 
    source: bh.ttAdapter() 
    }; 

    var ta = $(".typeahead").eq(0).typeahead(
    { 
     hint: true 
     highlight: true 
     minLength: 1 
    }, 
    datasetStates 
    ); 
    ta.on('typeahead:selected', someFunctionToHandleEvent); 
}); 

Nadzieja to pomaga.