JQuery Autocomplete, wie Label in Autocomplete-Texteingabe schreiben?

Hallo ich benutze jQuery UI Autocomplete.JQuery Autocomplete, wie Label in Autocomplete-Texteingabe schreiben?

Ich bekomme Werte und Beschriftungen aus dem Dropdown-Bereich. Ich werde den Wert in eine versteckte Eingabe schreiben und später verwenden. Ich könnte das tun, aber ich kann das Etikett nicht in die Sucheingabe schreiben, nach dem ausgewählten Element. Wenn ich eine Zeile in der Dropdown-Box auswähle, wird der Wert der Zeile im Suchbereich (#Tags) angezeigt, aber ich möchte die Beschriftung dort eingeben.

Hier ist mein Code: Dank

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

Quelle

2013-10-11 Ali insan Soyaslan

ein return false (oder event.preventDefault) im select Ereignis Hinzufügen Hälfte Ihres Problem löst. Das verbleibende Problem kann durch Hinzufügen eines focus Ereignis gelöst werden:

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

Quelle

2013-10-11 08:15:17

bekommen habe, wie mache ich Tagnamen als Texteingabe und muss diese Namen in der externen Akte wie '.txt' speichern zB: ich habe ein Eingabefeld es erlaubt Benutzer zu schreiben ihr Land, Da ich Liste des Landes in der Textdatei habe, So wenn Benutzer anfängt, 'AM' 'jQuery einzugeben' sollte alle Wörter von der Textdatei laden, die 'AM' im ersten zwei Buchstaben –

zusammenbringt Ich denke, dass Sie: die Datei über laden konnten AJAX, wandle den Inhalt in ein Array um ('content.split (/ \ r \ n /)'), setze dieses Array als Quelle. –

event.preventDefault() ist der Schlüssel. Vielen Dank – Apperside

Nach meinem Code ist, wo ich ab von den automatischen Vervollständigung verwenden, um in nächstes Element zu füllen, die ein verstecktes Eingabefeld ist:

überprüfen Sie, ob das helfen Sie in etwas

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_ ist eine der ID meines mehr taxtboxes, wo ich die automatische Vervollständigung initiieren will.

P.S Ich habe diese Funktion in Smarty verwendet, also bitte nicht vergessen, vollständige Funktion zu kopieren.

Quelle

2013-10-11 08:00:23

Lösung: Fügen Sie eine Rückgabe false hinzu; nach dem Einstellen der Etiketten.

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

Quelle

2013-10-11 08:04:43 Agilix

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

Es funktioniert. aber ich konnte nicht autocomplete erstellen, nachdem ich Daten von Ajax – Deen

fügen Sie einfach return false auf Ihre Funktion wie diese, FIDDLE

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

Quelle

2013-10-11 08:08:07

Ein kleines Plugin für eine Allzweck-Lösung:

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

Also, wo Sie yourInput.autocomplete(options) verwenden würde, Sie stattdessen Verwenden Sie yourInput.autocompleteHidden(selectorOrJqueryObject, options). Dies hat den Vorteil, dass weiterhin die Optionen focus und select ohne wiederholten Code möglich sind. Es löscht auch die versteckte Eingabe, wenn in der Haupteingabe kein (sichtbarer) Wert eingegeben wird.

Quelle

2018-02-08 02:18:15 Walf

JQuery Autocomplete, wie Label in Autocomplete-Texteingabe schreiben?

Antwort

Verwandte Themen