All geek questions in one place

JQuery autocomplete how to write a label in autocomplete text input?

Hello, I am using jQuery UI autocomplete.

I get the values ​​and labels from the drop down list. I will write the value in hidden input and use it later. I could do this, but after the select element, I cannot write the label to the search input. When I select a row from the drop-down list, the row value is displayed in the search area (#tags), but I want the label to be 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>
+6
source share
5 answers

Adding a return false (or event.preventDefault ) in the event select solves half of your problems. The remaining problem can be solved by adding the 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

+10
source

Solution: add return false; after setting the tags.

 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; } });
+1
source

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; } });
+1
source

Below is my code in which I use desc from autocomplete to populate the following element, which is a hidden input field:

Check if this helps you in anything

 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 identifiers of my multiple taxtboxes where I want to initiate autocomplete.

PS I used this function in smarty, so please do not copy the full function.

0
source

A small plugin for general purpose solutions:

 (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 use yourInput.autocomplete(options) , use yourInput.autocompleteHidden(selectorOrJqueryObject, options) instead. This allows the use of additional focus and select options without re-code. It also clears hidden input when no (visible) value is entered at the main input.

0
source

Source: https://habr.com/ru/post/955753/

More articles:


All Articles