JQuery autocomplete how to write label in autocomplete text input?

Asked 11/10, 2013 at 7:42 Answered 8/2, 2018 at 2:18

Solved javascript jquery jquery-ui jquery-ui-autocomplete

Hello I am using jQuery UI autocomplete.

I am getting values and labels from the drop down area. I will write the value in a hidden input and use it later. I could do that, but I cannot write the label in the search input, after the select item. When I select a row in the dropdown box, the value of the row is displayed in the search area (#tags), but I want the label in there.

Here is my code: Thanks

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

Anybody answered 11/10, 2013 at 7:42 Comment(0)

Adding a return false (or event.preventDefault) in the select event solves half of your problem. The remaining problem can be solved by adding a focus event:

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

Falbala answered 11/10, 2013 at 8:15 Comment(2)

how do i make tag names as text input and need to store those names in external file like .txt eg:i have a input box it allows user to type their country, Since i have list of country in text file, So when user starts typing AM jQuery should load all words from text file that matches AM in first two letter – Pneumogastric 28/12, 2014 at 18:20

I think you could: load the file via AJAX, convert the content to an array (content.split(/\r\n/)), set this array as source. – Falbala 28/12, 2014 at 18:35

Solution: Add a return false; after setting the labels.

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

Outgrow answered 11/10, 2013 at 8:4 Comment(1)

It is working. but i couldn't able to create autocomplete after getting data from ajax – Anthodium 29/1, 2016 at 9:31

just add return false to your function like this, FIDDLE

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

Douty answered 11/10, 2013 at 8:8 Comment(0)

Following is my code where i use desc from autocomplete to fill into next element that is an hidden input box :

Check if this helps you in something

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_ is one of the id of my multiple taxtboxes where i want to initiate autocomplete.

P.S i have used this function in smarty so please dont mind copying complete function.

Misleading answered 11/10, 2013 at 8:0 Comment(0)

A tiny plugin for a general purpose solution:

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

So where you'd use yourInput.autocomplete(options), you instead use yourInput.autocompleteHidden(selectorOrJqueryObject, options). This has the benefit of still allowing additional focus and select options, without repeated code. It also clears the hidden input when no (visible) value is entered in the main input.

Pedicel answered 8/2, 2018 at 2:18 Comment(0)

Recommended topics

Hot tags