javascript JQuery自动完成如何在自动完成文本输入中编写标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19312840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery autocomplete how to write label in autocomplete text input?
提问by Ali insan Soyaslan
Hello I am using jQuery UI autocomplete.
您好，我正在使用 jQuery UI 自动完成功能。
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.
我从下拉区域获取值和标签。我将在隐藏输入中写入该值并稍后使用。我可以这样做，但我无法在选择项之后的搜索输入中写入标签。当我在下拉框中选择一行时，该行的值显示在搜索区域 (#tags) 中，但我希望标签在那里。
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>
回答by Salman A
Adding a return false(or event.preventDefault) in the selectevent solves half of your problem. The remaining problem can be solved by adding a focusevent:
在事件中添加return false(或event.preventDefault)select可以解决一半的问题。剩下的问题可以通过添加一个focus事件来解决：
$("#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);
}
});
回答by Agilix
Solution: Add a return false; after setting the labels.
解决办法：加一个return false；设置标签后。
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;
}
});
回答by rajesh kakawat
回答by Sunil Verma
Following is my code where i use desc from autocomplete to fill into next element that is an hidden input box :
以下是我使用自动完成中的 desc 填充下一个隐藏输入框元素的代码：
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.
nxpublisher_productid_ 是我要启动自动完成的多个 taxtboxes 的 ID 之一。
P.S i have used this function in smarty so please dont mind copying complete function.
PS我已经在smarty中使用过这个功能，所以请不要介意复制完整的功能。
回答by Walf
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 focusand selectoptions, without repeated code. It also clears the hidden input when no (visible) value is entered in the main input.
因此，在您使用 的地方yourInput.autocomplete(options)，您可以使用yourInput.autocompleteHidden(selectorOrJqueryObject, options). 这样做的好处是仍然允许附加focus和select选项，而无需重复代码。当在主输入中未输入（可见）值时，它还清除隐藏输入。
