JQuery UI Autocomplete - Làm thế nào để chọn một mục và mantain nhãn (không phải là giá trị) trong văn bản đầu vào

Tôi đang cố gắng sử dụng các plugin JQuery UI Autocomplete (click to see the demo page of JQuery UI Autocomplete plugin)JQuery UI Autocomplete - Làm thế nào để chọn một mục và mantain nhãn (không phải là giá trị) trong văn bản đầu vào

tôi đang sử dụng như nguồn dữ liệu một danh sách các đối tượng dưới đây:

  var availableTags = [ 
       {label: "Sao Paulo", value: "SP"}, 
       {label: "Sorocaba", value: "SO"}, 
       {label: "Paulinia", value: "PA"}, 
       {label: "São Roque", value: "SR"} 
      ];

Vấn đề là khi tôi chọn một mục, giá trị của nguồn dữ liệu được đặt thành trường nhập chứ không phải nhãn. Tôi đã tạo ra một xử lý để chọn để lưu giá trị mục trong trường ẩn và đặt nhãn cho trường nhập, nhưng sự kiện này được khởi chạy quá sớm bởi plugin và giá trị được đặt lại thành trường nhập.

HTML:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />  
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />  
     <style> 
      .ui-menu-item 
      { 
       font-size: 12px; 
      } 
     </style> 
     <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script> 
     <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var availableTags = [ 
        {label: "Sao Paulo", value: "SP"}, 
        {label: "Sorocaba", value: "SO"}, 
        {label: "Paulinia", value: "PA"}, 
        {label: "São Roque", value: "SR"} 
       ]; 

       $("#txtCidade").autocomplete({ minLength: 0, 
               source: availableTags);  
      }); 

      function OnSelect(event, ui) 
      { 
       var item = ui.item; 
       var itemLabel = item.label; 
       var itemValue = item.value; 

       $("#hidCidade").val(itemValue); 
       $("#txtCidade").val(itemLabel); 
      } 

     </script> 
    </head> 
    <body> 
     <form> 
      <input id="hidCidade" type="hidden" /> 
      <input id="txtCidade" type="input" class="ui-autocomplete-input" /> 
     </form> 
    </body> 
</html>

Xin vui lòng, có thể ai đó giúp tôi với điều này?

Cảm ơn!

Nguồn

2012-03-19 outlookrperson

Tôi đã giải quyết sự cố khi tạo trình xử lý cho OnFocus và OnSelect và trả về false trong mỗi một.

 function OnFocus(event, ui) 
     { 
      $("#txtCidade").val(ui.item.label); 
      return false; 
     } 

     function OnSelect(event, ui) 
     { 
      var item = ui.item; 
      var itemLabel = item.label; 
      var itemValue = item.value; 
      var campo = $("#txtCidade"); 

      $("#hidCidade").val(itemValue); 
      $("#txtCidade").val(itemLabel); 

      var campoValue = campo.val(); 
      var hidCampoValue = $("hidCidade").val(); 
      return false; 
     }

Nguồn

2012-03-19 19:46:22 outlookrperson

Thay đổi cuộc gọi autocomplete của bạn như sau:

$("#txtCidade").autocomplete({ 
    source: availableTags, 
    select: function(event, ui) { 
     $("#hidCidade").val(ui.item.label); 
    } 
});

#txtCidade sẽ tự động pckup nhãn lựa chọn khi một mục autocomplete được nhấp vào.

Xem jsFiddle example tại đây.

Nguồn

2012-03-19 15:02:51 j08691

điều này không hoạt động! – outlookrperson

Điều gì về nó không hoạt động? – j08691

Xin lỗi @ j08691, nhưng tôi nghĩ bạn không hiểu chính xác câu hỏi. Sử dụng mã mà bạn đã cung cấp trong jsfiddler, chọn một tùy chọn, giá trị (không phải nhãn) sẽ xuất hiện trong trường hộp văn bản. – outlookrperson

Vì tôi cũng phải giải quyết vấn đề này. Tôi nghĩ tôi sẽ cho tôi giải pháp. IMHO nó sạch hơn vì bạn không cần các chức năng OnSelect và OnFocus riêng biệt. (mặc dù nó thực sự không giống như những gì rperson đã kết thúc làm)

$('#txtCidade').autocomplete({ 
    source: availableTags, 
    focus: function(event, ui) { 
    $(this).val(ui.item.label); 
    return false; 
    }, 
    select: function(event, ui) { 
    $('#hidCidade').val(ui.item.value); 
    $(this).val(ui.item.label); 
    return false; 
    } 
});

Nguồn

2012-11-21 05:25:57 snorris

Yêu thích nó! Điều này thật hoàn hảo và dễ dàng. :) – gregthegeek

sự trở lại sai làm cho tất cả sự khác biệt :) – 2ni

JQuery UI Autocomplete - Làm thế nào để chọn một mục và mantain nhãn (không phải là giá trị) trong văn bản đầu vào

Trả lời

Các vấn đề liên quan