JQuery, otomatik tamamlama metin girişinde nasıl etiket yazılır?

Merhaba jQuery UI otomatik tamamlama kullanıyorum.JQuery, otomatik tamamlama metin girişinde nasıl etiket yazılır?

Aşağı açılır alandan değerler ve etiketler alıyorum. Değeri gizli bir girdiye yazıp daha sonra kullanacağım. Bunu yapabilirdim, ancak seçili öğeden sonra etiketi arama girişine yazamıyorum. Açılır kutuda bir satır seçtiğimde, satırın değeri arama alanında (#tags) görüntülenir, ancak etiketin orada olmasını istiyorum.

Kontrol bu yardımcı olur eğer:

<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>

kaynak

2013-10-11 Ali insan Soyaslan

bir select olay return false (veya event.preventDefault) sorunun yarısını çözer ekleme bu gibi işleve yanlış dönüşü ekleyin. Kalan problem focus olayı ekleyerek çözülebilir:

$("#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

kaynak

2013-10-11 08:15:17

'dan veri aldıktan sonra otomatik tamamlama oluşturamadım nasıl metin girişi olarak etiket isimleri yapabilirim ve bu isimleri '.txt' gibi harici bir dosyada saklamak gerekir, örneğin: Giriş kutusuna sahip olan bir giriş kutusu var Onların ülke, Metin dosyasında ülke listesi var, Bu yüzden kullanıcı yazmaya başladığında 'AM' jQuery 'ilk iki harfi –

ile eşleşir metin dosyasından gelen tüm kelimeleri yüklemek gerekir: Ben aracılığıyla dosya yüklemek AJAX, içeriği bir diziye ('content.split (/ \ r \ n /)') dönüştürün, bu diziyi kaynak olarak ayarlayın. –

event.preventDefault() anahtarıdır. Teşekkürler – Apperside

takiben i bir gizli giriş kutusu olan bir sonraki elemana içine doldurmak için otomatik tamamlama azalan kullanmak benim kodudur Teşekkür: Burada

benim kodudur şey

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_ i otomatik tamamlama başlatmak istiyorum benim birden taxtboxes ait id biridir.

P.S Bu işlevi smarty'de kullandım, bu nedenle lütfen tüm işlevleri kopyalamayı unutmayın.

kaynak

2013-10-11 08:00:23

Çözüm: Bir false döndür; etiketleri ayarladıktan sonra.

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; 
      } 
     });

kaynak

2013-10-11 08:04:43 Agilix

http://jsfiddle.net/9jRAh/ example – Agilix

Çalışıyor. ama ajax – Deen

sadece FIDDLE

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

kaynak

2013-10-11 08:08:07

bir genel amaçlı çözümü için minik bir eklenti:

(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);

Yani yourInput.autocomplete(options) bunun yerine kullanmak istiyorum yourInput.autocompleteHidden(selectorOrJqueryObject, options) kullanın. Bu, tekrarlanan kod olmaksızın ek focus ve select seçeneklerine izin vermenin avantajına sahiptir. Ana girişe hiçbir (görünür) değer girilmediğinde gizli girişi de temizler.

kaynak

2018-02-08 02:18:15 Walf

JQuery, otomatik tamamlama metin girişinde nasıl etiket yazılır?

cevap

İlgili konular