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
https://stackoverflow.com/questions/19312840
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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>
Solution
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);
}
});
OTHER TIPS
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;
}
});
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;
}
});
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.
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.
