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

【问题标题】：JQuery autocomplete how to write label in autocomplete text input?JQuery自动完成如何在自动完成文本输入中写标签？
【发布时间】：2013-10-19 05:18:12
【问题描述】：

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

我正在从下拉区域中获取值和标签。我将在隐藏输入中写入值并稍后使用它。我可以这样做，但我不能在选择项之后在搜索输入中写入标签。当我在下拉框中选择一行时，该行的值显示在搜索区域（#tags）中，但我希望标签在那里。

这是我的代码：谢谢

<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>

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

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

(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)。这样做的好处是仍然允许额外的focus 和select 选项，而无需重复代码。当主输入中没有（可见）值输入时，它还会清除隐藏的输入。

【讨论】：

【解决方案2】：

在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);
    }
});

Demo here

【讨论】：

我如何将标签名称作为文本输入并需要将这些名称存储在外部文件中，例如.txt 例如：我有一个输入框，它允许用户输入他们的国家，因为我有文本文件中的国家/地区，因此当用户开始输入 AM jQuery 应该从文本文件中加载与前两个字母 AM 匹配的所有单词
我认为您可以：通过 AJAX 加载文件，将内容转换为数组 (content.split(/\r\n/))，将此数组设置为源。
event.preventDefault() 是关键。谢谢

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

解决方法：加一个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;
          }
      });

【讨论】：

它正在工作。但从 ajax 获取数据后我无法创建自动完成

【解决方案5】：

以下是我的代码，我使用自动完成中的 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 之一。

P.S 我在 smarty 中使用过这个功能，所以请不要介意复制完整的功能。

【讨论】：