JQuery autocomplete how to write label in autocomplete text input?

Question

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>

score 11 · Accepted Answer · answered Oct 11 '13 at 08:15

11

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

answered Oct 11 '13 at 08:15

Salman A

262,204
82
430
521

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 – Dec 28 '14 at 18:20
1

I think you could: load the file via AJAX, convert the content to an array (`content.split(/\r\n/)`), set this array as source. – Salman A Dec 28 '14 at 18:35
event.preventDefault() is the key. Thanks – Apperside Apr 11 '15 at 17:02

score 1 · Answer 2 · answered Oct 11 '13 at 08:04

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

It is working. but i couldn't able to create autocomplete after getting data from ajax — Deen, Jan 29 '16 at 09:31

score 1 · Answer 3 · answered Oct 11 '13 at 08:08

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

score 0 · Answer 4 · answered Oct 11 '13 at 08:00

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.

score 0 · Answer 5 · answered Feb 08 '18 at 02:18

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.

JQuery autocomplete how to write label in autocomplete text input?

5 Answers5

Linked