Jquery nguồn thay đổi autocomplete

Question

Tôi có Fiddle here

Và tôi cần availabletags1 như nguồn nếu đó là nút radio Choice1 được chọn và availabletags2 nếu nút radio Choice2 được chọn. Và tôi cần phải thay đổi điều này theo lựa chọn thực tế của người dùng.

Mã sản phẩm:

var availableTags1 = [ 
"ActionScript", 
"AppleScript", 
"Asp" 
]; 

var availableTags2 = [ 
"Python", 
"Ruby", 
"Scala", 
"Scheme" 
]; 

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

$('input[name="choice"]').click(function(){ 
if(this.checked){ 
    if(this.value == "1"){ 
     $("#autocomplete").autocomplete('option', 'source', availableTags1) 
    } else { 
     $("#autocomplete").autocomplete('option', 'source', availableTags2) 
    } 

Answer 1

Hãy thử

$('input[name="choice"]').click(function(){ 
    if(this.checked){ 
     if(this.value == "1"){ 
      $("#autocomplete").autocomplete('option', 'source', availableTags1) 
     } else { 
      $("#autocomplete").autocomplete('option', 'source', availableTags2) 
     } 
    } 
}) 

Demo: Fiddle

Answer 2

Đối với bất cứ ai đọc sách này vào năm 2016 và xa hơn nữa, có một cách tốt hơn bằng cách sử dụng mô hình request/response. Tự động hoàn thành jQuery có tùy chọn source chấp nhận một hàm sẽ nhận hai đối số khi được trình cắm thêm gọi: request và response. request là một đối tượng chứa thông tin về thành phần tự động hoàn thành, cụ thể là request.term là giá trị của trường nhập. response là một hàm, chấp nhận một tham số duy nhất, dữ liệu trả về response(data). như bạn có thể thấy trong ví dụ dưới đây, bạn có thể sử dụng tùy chọn này để tạo điều kiện cho yêu cầu ajax. bạn có thể chỉ cần chuyển hàm request làm gọi lại thành công cho các phương thức jQuery $.ajax và nó sẽ hoạt động như dự định. bạn cũng có thể làm những thứ thú vị khác bằng cách sử dụng mẫu này, như tìm kiếm trong bộ nhớ nếu bạn đã tìm nạp và lưu trữ một số dữ liệu, làm cho các tìm kiếm tiếp theo thêm thời gian thực cho người dùng.

$('#term-search').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: $('#api-endpoint').val(),//whether you are using radios, checkboxes, or selects, you can change the endpoint at runtime automatically 
      dataType: "json", 
      data: { 
       query : request.term,//the value of the input is here 
       language : $('#lang-type').val(), //you can even add extra parameters 
       token : $('#csrf_token').val() 
      }, 
      success: response //response is a callable accepting data parameter. no reason to wrap in anonymous function. 
     }); 
    }, 
    minLength: 1, 
    cacheLength: 0, 
    select: function(event, ui) {} //do something with the selected option. refer to jquery ui autocomplete docs for more info 
});