jQuery UI Autocomplete sử dụng một tệp json tĩnh như nguồn

Question

Tôi đang sử dụng jquery-ui-autocomplete (trên thực tế, một catcomplete gắn liền với một hộp tìm kiếm). Nó hoạt động vey tốt miễn là tôi sử dụng một mảng được xác định tĩnh của các mục như nguồn.

Vì lý do hiệu suất, tôi không muốn tự động điền để gửi yêu cầu Ajax tới tập lệnh PHP làm% like% yêu cầu với MySQL. Vì vậy, Tôi đã tạo tệp JSON từ DB, chứa mọi mục có thể được đối sánh trong tìm kiếm (khoảng 20-30 mục, từ nhiều bảng sql). Tôi muốn đọc/phân tích cú pháp tệp chỉ một lần, khi trang tải hoặc khi người dùng bắt đầu nhập vào hộp tìm kiếm.

Tôi bị kẹt ở đây. Tôi đã cố gắng đính kèm một cuộc gọi Ajax tới .catcomplete() (mã bên dưới). Tôi cũng đã cố gắng thực hiện cuộc gọi getJSON và tạo phương thức .catcomplete trong phương thức success() của nó. Cả hai cách đều không thành công.

Tôi là người mới vào công cụ JS/jQuery, tôi đã thích nó, nhưng tôi hơi lạc mất. Bất kỳ trợ giúp/giải pháp/con trỏ để doc hữu ích sẽ được đánh giá rất nhiều.

Cảm ơn bạn rất nhiều!

Dưới đây là HTML: (đơn giản thực)

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

Đây là mã JS của tôi:

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

mẫu JSON dữ liệu:

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

Answer 1

nguồn dữ liệu của bạn là ném một lỗi phân tích cú pháp kể từ khi định dạng json không propper, trong json các phím cũng phải được kèm theo trong vòng ".

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

Demo: Plunker

Nếu bạn muốn tìm kiếm dựa theo yêu cầu hạn, sau đó bạn sẽ phải thực hiện một số thay đổi nhiều

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

Hãy thử lật nó xung quanh, vì vậy trên trang tải bạn lấy nó một lần, sau đó nhanh chóng tự động hoàn thành.

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