AutoComplete jQuery dữ liệu Sử dụng JSON

Question

Hãy tưởng tượng một tệp json với các dữ liệu sau:

[ 
    { 
     color: "red", 
     value: "#f00" 
    }, 
    { 
     color: "green", 
     value: "#0f0" 
    }, 
    { 
     color: "blue", 
     value: "#00f" 
    }, 
    { 
     color: "cyan", 
     value: "#0ff" 
    } 
] 

Sử dụng phương pháp autocomplete của jQuery, tôi muốn nó có thể hiển thị các màu như các tùy chọn để chọn và chèn giá trị trên đầu vào.

<input type="text" name="selector" id="selector" /> 

<input type="text" name="color" id="color" /> 
<input type="text" name="value" id="value" /> 

Ở trên không cần giới thiệu. Công cụ chọn tìm kiếm màu sắc, input.color với màu giá trị và input.value với giá trị giá trị giá trị.

EDIT: Tôi có dữ liệu này JSON:

[{ 
    "label": "Sec\u00e7\u00e3o 1", 
    "value": "1" 
}, { 
    "label": "Sec\u00e7\u00e3o 2", 
    "value": "2" 
}, { 
    "label": "Sec\u00e7\u00e3o 3", 
    "value": "3" 
}, { 
    "label": "Sec\u00e7\u00e3o 4", 
    "value": "4" 
}] 

và HTML này:

<input type="text" id="name" /> 
<input type="text" id="value" /> 

và jQuery này:

$(document).ready(function(){ 
    $("#name").autocomplete({ 
     source: "json.php", 
     select: function (event, ui) { 
      $("#name").val(ui.label); 
      $("#value").val(ui.value); 
     } 
    }); 
}); 

Tôi đi theo câu trả lời của Andrew và nó nhắc tôi chọn dữ liệu, nhưng nếu tôi cảnh báo ui.label và ui.value biến, nó nói 'không xác định'. Tôi đang thiếu gì?

Edit2: Hãy nói rằng tôi có HTML này:

<input type="text" class="name" /> 
<input type="text" class="value" /> 

<input type="text" class="name" /> 
<input type="text" class="value" /> 

Có thể xử lý nhiều selectors với cùng phương pháp .autocomplete()? Tương tự, chọn nhãn tôi muốn sử dụng input.name và chỉ cập nhật input.value bên cạnh nhãn đó?

[input.name] [input.value]
^ Tôi chọn              ^cập nhật
    nhãn                       giá trị bên cạnh nó
[input.name] [input.value]
^ này vẫn còn nguyên vẹn^

Answer 1

Sử dụng một nguồn dữ liệu từ xa:

$("#selector").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "my_server_side_resource.php", 
      type: "GET", 
      data: request, 
      success: function (data) { 
       response($.map(data, function (el) { 
        return { 
         label: el.color, 
         value: el.value 
        }; 
       })); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // Prevent value from being put in the input: 
     this.value = ui.item.label; 
     // Set the next input's value to the "value" of the item. 
     $(this).next("input").val(ui.item.value); 
     event.preventDefault(); 
    } 
}); 

Điều chỉnh được $.ajax cuộc gọi khi cần thiết. Ví dụ này sẽ tạo các yêu cầu tới tài nguyên PHP của bạn trông giống như sau:

my_server_side_resource.php?term = xyz

Nếu bạn có kiểm soát server-side code của bạn, bạn có thể thay đổi dữ liệu đó là quay trở lại giống như thế này:

[ 
    { 
     label: "red", 
     value: "#f00" 
    }, /* etc */ 
] 

Bạn chỉ có thể sử dụng một chuỗi, tên của bạn tài nguyên server-side như source:

$("#selector").autocomplete({ 
    source: "my_server_side_resource.php", 
    select: /* same as above */ 
}); 

Kiểm tra các remote with JSONP example cho một ví dụ đầy đủ sử dụng một nguồn tài nguyên server-side.

Edit: Xem ví dụ này cho một bản demo làm việc sử dụng dữ liệu địa phương: http://jsfiddle.net/SMxY6/

Answer 2

Bạn cần thay đổi đối tượng JSON của bạn để sử dụng "nhãn" bất động sản. Từ các tài liệu:

mảng các đối tượng với nhãn và giá trị thuộc tính: [{label: "Choice1", giá trị: "value1"}, ...]

Thuộc tính nhãn được hiển thị trong trình đơn gợi ý. Giá trị sẽ được chèn vào phần tử đầu vào sau khi người dùng đã chọn một thứ gì đó từ trình đơn. Nếu chỉ một thuộc tính được chỉ định, nó sẽ được sử dụng cho cả hai, ví dụ: nếu bạn chỉ cung cấp các thuộc tính giá trị, thì giá trị cũng sẽ là được sử dụng làm nhãn.

Sau đó, bạn cần đặt giá trị của các trường văn bản khác khi sự kiện "thay đổi" hoặc "chọn" được kích hoạt.

Answer 3

Sau nhiều giờ làm việc .. Cuối cùng đã xảy ra. Thing là tôi có một mảng json bao gồm nhiều đối tượng json. Mỗi đối tượng json có tên ngân hàng và mã ifsc của nó.Người dùng cần phải nhập ngân hàng và lọc ra hàng chi tiết ngân hàng từ cơ sở dữ liệu. Khi chọn ngân hàng đó ... Tôi có 2 trường đầu vào một cho ngân hàng và một cho mã ifsc. Tôi chọn tên ngân hàng và mã ifsc tương ứng được hiển thị. Vì vậy, đây là cách tôi đã làm nó: -

---

<script type="text/javascript"> 
$(function() { 





    $("#newBeneBankName").autocomplete({ 

     source: function(request, response) { 

      $.ajax({ 
       url: "getBankDetailsIFSCJson", 
       type: "GET", 
       data: { 
        term: request.term 
       }, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data, function (el) { 
         return { 
          label: el.label, 
          value: el.value 
         }; 
        })); 
       } 
      }); 
     }, //newBeneBankName addBeneIfscCode 
     focus: function (event, ui) { 
      event.preventDefault(); 
      $("#newBeneBankName").val(ui.item.label); 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      $("#addBeneIfscCode").val(ui.item.value); 
      $("#newBeneBankName").val(ui.item.label); 
     } 

}); 
}); 

---

mảng json của tôi = [{ nhãn: "Ngân hàng nhà nước của Ấn Độ", giá trị: "SBIN00076" } , { nhãn: "ICICI Bank", giá trị: "ICIC001" }, .. ]