Tự động hoàn thành giao diện người dùng jQuery với JSON từ URL

Question

Tôi đang sử dụng chức năng Tự động hoàn thành giao diện người dùng jQuery. Tôi có thể làm cho nó hoạt động với ví dụ được cung cấp với jQuery UI như thế này:

var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 

$("#tags").autocomplete({ 
    source: availableTags 
}); 

Điều này làm việc mà không có bất kỳ vấn đề gì. Nhưng tôi cần phải sử dụng JSON như là nguồn dữ liệu của tôi những người có thể được lấy ra như thế này: http://mysite.local/services/suggest.ashx?query=ball

Nếu tôi sẽ URL mà tôi nhận được JSON lại như thế này:

[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}] 

Làm thế nào tôi có thể sử dụng URL của tôi như nguồn dữ liệu?

tôi đã cố gắng thay đổi nguồn-option như thế này:

$("#tags").autocomplete({ 
    source: "http://mysite.local/services/suggest.ashx" 
}); 

Nhưng nó không giúp đỡ. Tôi đoán rằng dịch vụ không biết từ khóa nào đã được nhập vào trường nhập liệu?

Mọi con trỏ sẽ tuyệt vời.

Answer 1

Bạn cần thay đổi nguồn của mình để đáp ứng các thông số kỹ thuật sau (được nêu trong documentation cho tiện ích). Nguồn tin phải là một mảng chứa (hoặc trả lại một mảng chứa):

• chuỗi đơn giản, hoặc:
• đối tượng chứa một tài sản label, một tài sản value, hoặc cả hai.

Nếu vì một lý do nào đó bạn không thể thay đổi nguồn từ xa của mình, bạn có thể chuyển đổi dữ liệu sau khi đã truy xuất thành công. Đây là cách bạn sẽ làm điều đó:

$("#tags").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://mysite.local/services/suggest.ashx", 
      data: { query: request.term }, 
      success: function (data) { 
       var transformed = $.map(data, function (el) { 
        return { 
         label: el.phrase, 
         id: el.id 
        }; 
       }); 
       response(transformed); 
      }, 
      error: function() { 
       response([]); 
      } 
     }); 
    }); 
}); 

Như bạn thấy, bạn sẽ cần phải thực hiện AJAX gọi mình bằng cách đi qua trong một chức năng để các source tùy chọn widget.

Ý tưởng là sử dụng $.map để biến mảng của bạn thành một mảng chứa các phần tử mà tiện ích tự động hoàn thành có thể phân tích cú pháp.

Cũng lưu ý rằng thông số data được chuyển đến cuộc gọi AJAX sẽ kết thúc là ?query=<term> khi người dùng nhập cụm từ.