JQuery tự động hoàn tất cách viết nhãn trong nhập văn bản tự động điền?

Xin chào, tôi đang sử dụng jQuery UI autocomplete.JQuery tự động hoàn tất cách viết nhãn trong nhập văn bản tự động điền?

Tôi nhận được các giá trị và nhãn từ khu vực thả xuống. Tôi sẽ viết giá trị vào một đầu vào ẩn và sử dụng nó sau này. Tôi có thể làm điều đó, nhưng tôi không thể viết nhãn trong đầu vào tìm kiếm, sau khi chọn mục. Khi tôi chọn một hàng trong hộp thả xuống, giá trị của hàng được hiển thị trong khu vực tìm kiếm (#tags), nhưng tôi muốn nhãn ở đó.

Đây là mã của tôi: Cảm ơn

<html> 
    <head> 
     <script> 
     $(document).ready(function() { 
      var selectedLabel = null; 
      var yerler = [ 
       { "value": 3, "label": "Adana Seyhan" }, 
       { "value": 78, "label": "Seyhan Adana" }, 
       { "value": 17, "label": "Paris Fransa" }, 
       { "value": 123, "label": "Tokyo Japan"} 
      ]; 

      $("#tags").autocomplete({ 
       source: yerler, 
       select: function (event, ui) { 
        $("#projeKatmanRaporCbx").val(ui.item.value); 
        $("#tags").val(ui.item.label); 
       } 
      });  
     }); 
     </script> 
    </head> 
    <body> 
     <div class="ui-widget"> 
      <label for="tags">Tags: </label> 
      <input id="tags" /> 
      <input type="text" id="projeKatmanRaporCbx" /> 
     </div> 
    </body> 
</html>

Nguồn

2013-10-11 Ali insan Soyaslan

Thêm một return false (hoặc event.preventDefault) trong trường hợp select giải quyết một nửa số vấn đề của bạn. Vấn đề còn lại có thể được giải quyết bằng cách thêm một sự kiện focus:

$("#tags").autocomplete({ 
    source: yerler, 
    focus: function (event, ui) { 
     event.preventDefault(); 
     $("#tags").val(ui.item.label); 
    }, 
    select: function (event, ui) { 
     event.preventDefault(); 
     $("#projeKatmanRaporCbx").val(ui.item.value); 
     $("#tags").val(ui.item.label); 
    } 
});

Demo here

Nguồn

2013-10-11 08:15:17

làm cách nào để tôi tạo tên thẻ làm kiểu nhập văn bản và cần lưu trữ những tên đó trong tệp bên ngoài như '.txt', ví dụ: tôi có hộp nhập cho phép người dùng nhập Vì vậy, khi người dùng bắt đầu nhập 'AM'' jQuery' nên tải tất cả các từ từ tệp văn bản khớp với 'AM' trong hai chữ cái đầu tiên –

Tôi nghĩ bạn có thể: tải tệp qua AJAX, chuyển đổi nội dung thành một mảng ('content.split (/ \ r \ n /)'), thiết lập mảng này làm nguồn. –

event.preventDefault() là khóa. Cảm ơn – Apperside

Tiếp theo là mã của tôi mà tôi sử dụng desc từ autocomplete để điền vào phần tử tiếp theo đó là một hộp nhập ẩn:

Kiểm tra nếu điều này giúp bạn trong một cái gì đó

function getTage() { 
var availableTags = [ 
    {assign var=result_products_cnt value=1} 
    {foreach from=$result_products item=product} 
     {if $result_products_cnt eq $result_products_total} 
      { label: "{$product.name}", value: "{$product.name}", desc: "{$product.id_product}" } 
     {else} 
      { label: "{$product.name}", value: "{$product.name}", desc: "{$product.id_product}" }, 
     {/if} 
     {assign var=result_products_cnt value=$result_products_cnt+1} 
    {/foreach} 
]; 
return availableTags; 
} 
var availableTags = getTage(); 
$("#nxpublisher_productid_"+i).autocomplete({ 
    source: availableTags, 
    select: function(event, ui) { 
    $(this).next().val(ui.item.desc); 
    }, 
    open: function() { $('.ui-menu').width(400); $('.ui-menu li a').css("font-weight", "bold"); $('.ui-menu li a').css("text-align", "left");} 
});

nxpublisher_productid_ là một trong những id của nhiều thùng thuế nơi tôi muốn bắt đầu tự động hoàn thành.

P.S tôi đã sử dụng chức năng này trong smarty vì vậy xin vui lòng không nhớ sao chép đầy đủ chức năng.

Nguồn

2013-10-11 08:00:23

Giải pháp: Thêm sai trả về; sau khi đặt nhãn.

var selectedLabel = null; 
     var yerler = [ 
    { "value": 3, "label": "Adana Seyhan" }, 
    { "value": 78, "label": "Seyhan Adana" }, 
    { "value": 17, "label": "Paris Fransa" }, 
    { "value": 123, "label": "Tokyo Japan"}]; 

     $("#tags").autocomplete({ 
      source: yerler, 
      select: function (event, ui) { 

       $("#projeKatmanRaporCbx").val(ui.item.value); 
       $("#tags").val(ui.item.label); 

       return false; 
      } 
     });

Nguồn

2013-10-11 08:04:43 Agilix

http://jsfiddle.net/9jRAh/ ví dụ – Agilix

Nó đang hoạt động. nhưng tôi không thể tạo tự động hoàn tất sau khi lấy dữ liệu từ ajax – Deen

chỉ cần thêm trở lại sai đến chức năng của bạn như thế này, FIDDLE

$("#tags").autocomplete({ 
     source: yerler, 
     select: function (event, ui) { 
      $("#projeKatmanRaporCbx").val(ui.item.value); 
      $("#tags").val(ui.item.label); 
      return false; 
     } 
    });

Nguồn

2013-10-11 08:08:07

Một plugin nhỏ cho một giải pháp mục đích chung:

(function($) { 
    $.fn.autocompleteHidden = function($hiddenInput, autocompleteOpts) { 
     if ('string' == typeof $hiddenInput) { 
      $hiddenInput = $($hiddenInput); 
     } 
     var $input = this; 
     var opts = $.extend({}, autocompleteOpts, { 
      focus: function(evt, ui) { 
       $input.val(ui.item.label); 
       if (autocompleteOpts.focus) { 
        autocompleteOpts.focus.apply(this, arguments); 
       } 
       return false; 
      } 
      , select: function(evt, ui) { 
       $hiddenInput.val(ui.item.value); 
       $input.val(ui.item.label); 
       if (autocompleteOpts.select) { 
        autocompleteOpts.select.apply(this, arguments); 
       } 
       return false; 
      } 
     }); 
     this.autocomplete(opts); 
     $input.change(function(evt) { 
      if (/^\s*$/.test(this.value)) { 
       $hiddenInput.val(''); 
      } 
     }); 
    }; 
})(jQuery);

Vì vậy, nơi bạn muốn sử dụng yourInput.autocomplete(options), bạn thay vì sử dụng yourInput.autocompleteHidden(selectorOrJqueryObject, options). Điều này có lợi ích là vẫn cho phép các tùy chọn focus và select bổ sung mà không cần lặp lại mã. Nó cũng xóa đầu vào bị ẩn khi không có giá trị (hiển thị) được nhập vào đầu vào chính.

Nguồn

2018-02-08 02:18:15 Walf

JQuery tự động hoàn tất cách viết nhãn trong nhập văn bản tự động điền?

Trả lời

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