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