jQuery UI completamento automatico utilizzando un file JSON statica come fonte

Question

sto usando jQuery-ui-completamento automatico (in realtà, un catcomplete collegato a una casella di ricerca). Funziona bene finché utilizzo una matrice di elementi definita staticamente come sorgente.

Per motivi di prestazioni, non desidero che il completamento automatico invii richieste Ajax a uno script PHP rendendo% come% richieste a MySQL. Quindi, ho generato un file JSON dal DB, contenente tutti gli elementi che possono essere confrontati nella ricerca (circa 20-30 elementi, da molte tabelle sql). Vorrei leggere /analizzare il file solo una volta, mentre la pagina viene caricata o quando l'utente inizia a digitare nella casella di ricerca.

Sono bloccato qui. Ho provato ad allegare una chiamata Ajax al .catcomplete() (codice seguente). Ho anche provato a fare una chiamata getJSON e creare il .catcomplete nel suo metodo success(). Entrambe le strade falliscono silenziosamente.

Sono un po 'nuovo per JS/jQuery, mi piace già, ma sono un po' perso. Qualsiasi aiuto/soluzione/puntatore a un documento utile sarebbe molto apprezzato.

Grazie mille!

Ecco il codice HTML: (Real Simple)

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

Ecco il mio codice 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 
}); 

dati di esempio JSON:

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

Answer 1

tuo DataSource sta gettando un errore di analisi in quanto il formato JSON non è Propper, in JSON le chiavi devono anche essere racchiuso all'interno ".

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

Demo: Plunker

Se si desidera che le ricerche basate richiesta termine, allora si dovrà fare alcune ulteriori modifiche

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

Demo: Plunker

Answer 2

Prova lanciando in giro, così caricando la pagina una volta, quindi istanzia il completamento automatico.

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