Typeahead.js - prefetch php dinamico generato JSON

Question

sto usando Typeahead.js per i miei autosuggestioni, il mio codice è:

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(); 

Questo funziona bene, però mi piacerebbe cambiarlo in prefetch, per essere in grado di utilizzare tokens nel mio JSON e lasciare risultati di ritorno basati su token su Bloodhound.

Non riesco a creare semplicemente JSON statico, dato che ho aggiunto gli elementi di suggerimento al db in ogni momento.

C'è un modo per eseguire il prefetch del json in modo dinamico?

Answer 1

Ho scritto un esempio di Typeahead utilizzando prefetch. Questo esempio recupera i dati JSON da una fonte remota:

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

precaricare il JSON da una fonte remota, l'oggetto Bloodhound è stato implementato come segue:

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 
      }; 
     }); 
    } 
} 
}); 

Si andrà a sostituire l'URL di un file JSON statico (mostrato nel codice precedente) con un URL che restituisce il JSON generato dinamicamente.

Il codice chiave qui è la funzione "filtro" che mappa i token JSON piatti in una matrice di oggetti Javascript che è ciò che Typeahead deve operare.

Answer 2

Dalla documentazione: "Anche se è possibile farla franca per set di dati più piccoli, i dati precaricati non sono intesi a contenere interi set di dati, ma piuttosto come una cache di primo livello per i suggerimenti. 't tenere presente questo avvertimento, si corre il rischio di colpire i limiti di archiviazione locale. "

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

Non so quanti dati si stanno recuperando ma potrebbe essere meglio fare una chiamata AJAX per ottenere i dati e quindi caricare che nel vostro caso Bloodhound quando si ottiene la risposta.

Ecco un esempio utilizzando una chiamata AJAX jQuery:

//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); 
}); 

Spero che questo aiuti.