javascript - ¿Cómo establecemos el control remoto en Typeahead.js?

autocomplete remote-server

Question

En versiones anteriores, podía hacer lo siguiente:

$(''#search'').typeahead({
  name: ''Search'',
  remote: ''/search?query=%QUERY''
});

Pero desde la actualización 0.10 , typeahead.js nos pide que definamos la source que no puedo hacer funcionar. ¿Cómo defino el control remoto sin tener que definir una función de conjunto de datos?

Answer 1

Bueno, puedes hacer algo como:

$(''input#keywords'').typeahead({
    highlight: true,
},
{
  name: ''brands'',
  display: ''value'',
  source: function(query, syncResults, asyncResults) {
    $.get(''/search?q='' + query, function(data) {
      asyncResults(data);
    });
  }
})

fuente: Uso de Typeahead.js sin Bloodhound

Answer 2

Si desea utilizar los datos POST ajax en lugar de los datos GET para llamadas ajax más controladas, puede utilizar esta estructura:

var meslekler = new Bloodhound({
    datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.isim);
        },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: ''my_url_with_or_without_%query_token.php'',
        ajax:{
            type:"POST",
            cache:false,
            data:{
                limit:5
            },
            beforeSend:function(jqXHR,settings){
                settings.data+="&q="+$(''.tt-input'').typeahead(''val'');
            },
            complete:function(jqXHR,textStatus){
            meslekler.clearRemoteCache();
            }
        }
    }
});
meslekler.initialize();
$(''.typeahead'').typeahead(null, {
    name:''meslekler'',
    displayKey: ''isim'',
    source: meslekler.ttAdapter()
});

Answer 3

Typeahead.js versión 0.10.0 de Typeahead.js ahora usa un componente separado llamado motor de sugerencias para proporcionar los datos de sugerencia. El motor de sugerencias que se envía con Typeahead.js se llama Bloodhound .

Por lo tanto, no puede "definir el control remoto sin tener que definir una función de conjunto de datos".

Un ejemplo de esto trabajando con una fuente de datos remota (estoy consultando la API TheMovieDb, intente buscar "Aliens" por ejemplo) se puede encontrar aquí:

http://jsfiddle.net/Fresh/UkB7u/

El código está aquí:

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: ''http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e'',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$(''.typeahead'').typeahead(null, {
    // Use ''value'' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called ''value''
    displayKey: ''value'',
    source: movies.ttAdapter()
});

Observe cómo la función de filtro le permite elegir lo que quiere usar como sugerencia de escritura anticipada de una fuente de datos JSON no trivial.

Actualización para Typeahead 0.11.1

Para aquellos que están usando la versión más nueva de typeahead, aquí se puede encontrar un ejemplo de trabajo basado en la pregunta original:

http://jsfiddle.net/Fresh/bbzt9hcr/

Con respecto a Typeahead 0.10.0, la nueva versión (0.11.1) tiene las siguientes diferencias:

• La función "filtro" ha sido renombrada a "transformar".
• No es necesario llamar a initialize en el objeto Bloodhound, ni necesitamos llamar a ttAdapter () cuando lo asignamos a la fuente remota.
• Ahora necesita especificar el comodín (por ejemplo,% QUERY) dentro del hash de opciones remotas.