JQuery自动完成如何在自动完成文本输入中写入标签?

您好我正在使用jQuery UI自动完成。

我从下拉区域获取值和标签。 我将在隐藏的输入中写入值并稍后使用它。 我可以这样做,但是我不能在选择项之后在搜索输入中写标签。 当我在下拉框中选择一行时,行的值将显示在搜索区域(#tags)中,但我希望标签位于此处。

这是我的代码:谢谢

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

select事件中添加return false (或event.preventDefault )可以解决问题的一半。 剩下的问题可以通过添加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); } }); 

在这里演示

解决方案:添加返回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; } }); 

只需将return false添加到您的函数中,就像这样, FIDDLE

  $("#tags").autocomplete({ source: yerler, select: function (event, ui) { $("#projeKatmanRaporCbx").val(ui.item.value); $( "#tags" ).val( ui.item.label ); return false; } }); 

以下是我的代码,我使用自动完成中的desc来填充下一个隐藏输入框的元素:

检查这是否对您有所帮助

 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_是我想要启动自动完成的多个taxtbox的id之一。

PS我在smarty中使用过这个function所以请不要介意复制完整的function。

一个通用解决方案的小插件:

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

因此,在使用yourInput.autocomplete(options) ,您可以使用yourInput.autocompleteHidden(selectorOrJqueryObject, options) 。 这样做的好处是仍然允许额外的focusselect选项,而无需重复代码。 当在主输入中没有输入(可见)值时,它还会清除隐藏的输入。