admin管理员组文章数量:1221774
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>
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>
5 Answers
Reset to default 11Adding 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
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.
本文标签： javascriptJQuery autocomplete how to write label in autocomplete text inputStack Overflow
版权声明：本文标题：javascript - JQuery autocomplete how to write label in autocomplete text input? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739263516a2155482.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论