6

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

5 回答 5

10

在事件中添加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);
    }
});

演示在这里

于 2013-10-11T08:15:17.170 回答
1

解决方法：加一个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;
          }
      });
于 2013-10-11T08:04:43.027 回答
1

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

    $("#tags").autocomplete({
        source: yerler,
        select: function (event, ui) {
            $("#projeKatmanRaporCbx").val(ui.item.value);
            $( "#tags" ).val( ui.item.label );
            return false;
        }
    });
于 2013-10-11T08:08:07.483 回答
0

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

于 2013-10-11T08:00:23.077 回答
0

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

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

于 2018-02-08T02:18:15.920 回答