ejemplo - jQuery UI Autocompletar usando un archivo json estático como fuente

jquery combobox

Question

Estoy usando jquery-ui-autocomplete (en realidad, un catcomplete adjunto a un cuadro de búsqueda). Funciona muy bien siempre que use una fuente de elementos estáticos como fuentes.

Por motivos de rendimiento, no quiero que la función autocompletar envíe solicitudes Ajax a un script PHP haciendo% como% de solicitudes a MySQL. Entonces, generé un archivo JSON desde el DB , que contenía cada elemento que puede coincidir en la búsqueda (alrededor de 20-30 elementos, de muchas tablas sql). Me gustaría leer / analizar el archivo solo una vez, a medida que la página se carga o cuando el usuario comienza a escribir en el cuadro de búsqueda.

Estoy atorado aqui. Traté de adjuntar una llamada Ajax al .catcomplete () (código a continuación). También traté de hacer una llamada a getJSON y crear .catcomplete en su método success (). Ambas formas fallan silenciosamente.

Soy un poco nuevo en las cosas de JS / jQuery, ya me gusta, pero estoy un poco perdido. Cualquier ayuda / solución / puntero a un documento útil sería muy apreciada.

¡Muchas gracias!

Aquí está el HTML: (muy simple)

<form id="searchform" method="get" role="search">
<input id="searchfield" />
<input type="submit" name="go" value="go!" />
</form>

Aquí está mi código JS:

$( "#searchfield" ).catcomplete({
delay: 0,
source: function( request, response ) {
$.ajax({
url: "/path/to/cache.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label,
category: item.category,
desc: item.desc
};
}));
}
});
},
minlength:0
});

Muestra de datos JSON:

[
{ label: "lbl1", category: "cat1", desc: "desc1"},
{ label: "lbl2", category: "cat1", desc: "desc2"},
{ label: "lbl3", category: "cat1"}
]

Answer 1

Intente darle la vuelta, de modo que en la carga de la página lo agarre una vez, luego crea una instancia del autocompletado.

$(function() {
$.ajax({
url: "/path/to/cache.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
var cat_data = $.map(data, function(item) {
return {
label: item.label,
category: item.category,
desc: item.desc
};
});
$("#searchfield").catcomplete({
delay: 0,
source: cat_data,
minlength:0
});
}
});
});

Answer 2

Su fuente de datos está arrojando un error de análisis ya que el formato json no es apropiado, por lo que las claves también deben estar dentro de " .

{
"list" : [{
"label" : "lbl1",
"category" : "cat1",
"desc" : "desc1"
}, {
"label" : "lbl2",
"category" : "cat1",
"desc" : "desc2"
}, {
"label" : "lbl3",
"category" : "cat1"
}]
}

Demostración: Plunker

Si desea las búsquedas basadas en el término de solicitud, tendrá que hacer algunos cambios más

 var xhr;
$( "input" ).catcomplete({
delay: 0,
source: function( request, response ) {
var regex = new RegExp(request.term, ''i'');
if(xhr){
xhr.abort();
}
xhr = $.ajax({
url: "data.json",
dataType: "json",
cache: false,
success: function(data) {
response($.map(data.list, function(item) {
if(regex.test(item.label)){
return {
label: item.label,
category: item.category,
desc: item.desc
};
}
}));
}
});
},
minlength:0
});

Demostración: Plunker