Question

您好我正在使用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>

Answer 1

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

Demo here

Answer 2

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

Answer 3

只需将return false添加到您的函数中，例如FIDDLE

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

Answer 4

以下是我的代码，我使用自动完成中的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我已经巧妙地使用了这个功能，所以请不要介意复制完整的功能。

Answer 5

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

(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选项，而无需重复代码。当在主输入中没有输入（可见）值时，它也会清除隐藏的输入。

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

5 个答案: