jQuery UI autouzupełnianie przy użyciu statycznego pliku json jako źródło

Question

używam jQuery UI-autouzupełniania (Faktycznie, catcomplete dołączony do pola wyszukiwania). Działa dobrze, o ile korzystam z zdefiniowanej statycznie tablicy elementów jako źródła.

Z powodów związanych z wydajnością nie chcę, aby autouzupełnianie wysyłało żądania Ajax do skryptu PHP wysyłającego zapytania% like% do MySQL. Tak więc, wygenerowałem plik JSON z DB, zawierający każdy element, który można dopasować w wyszukiwaniu (około 20-30 pozycji, z wielu tabel sql). Chciałbym przeczytać/przeanalizować plik tylko raz, gdy strona się załaduje lub gdy użytkownik zacznie wpisywać pole wyszukiwania.

Utknąłem tutaj. Próbowałem dołączyć wywołanie Ajax do .catcomplete() (kod poniżej). Próbowałem również wykonać wywołanie getJSON i utworzyć .catcomplete w jego metodzie success(). Oba sposoby kończą się bezgłośnie.

Jestem trochę nowy w rzeczach JS/jQuery, już mi się podoba, ale jestem trochę zagubiony. Każda pomoc/rozwiązanie/wskaźnik do użytecznego dokumentu byłaby bardzo doceniana.

Dziękuję bardzo!

Oto HTML (Real Simple)

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

Oto mój kod 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 
}); 

danych JSON Próbka:

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

Answer 1

Twoje źródło danych jest rzucanie błąd składniowy od formacie json nie Właściwa, w json klawisze mają również zostać zamknięty w ".

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

Demo: Plunker

Jeśli chcesz wyszukać prośba termin oparte na, a następnie trzeba będzie zrobić trochę więcej zmian

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

Spróbuj przerzucanie go wokół, tak na stronie ładuje się raz, a następnie tworzy autouzupełnianie.

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