Question

我正在尝试使用JQuery UI自动完成插件（click to see the demo page of JQuery UI Autocomplete plugin）

我正在使用以下对象列表作为数据源：

            var availableTags = [
                 {label: "Sao Paulo", value: "SP"},
                 {label: "Sorocaba", value: "SO"},
                 {label: "Paulinia", value: "PA"},
                 {label: "São Roque", value: "SR"}
            ];

问题是当我选择一个项目时，数据源的值被设置为输入字段而不是标签。我创建了一个select选项，用于将项目值保存在隐藏字段中，并将标签设置为输入字段，但插件过早触发此事件，并将值重新设置为输入字段。 / p>

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />    
        <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />    
        <style>
            .ui-menu-item
            {
                font-size: 12px;
            }
        </style>
        <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var availableTags = [
                     {label: "Sao Paulo", value: "SP"},
                     {label: "Sorocaba", value: "SO"},
                     {label: "Paulinia", value: "PA"},
                     {label: "São Roque", value: "SR"}
                ];   

                $("#txtCidade").autocomplete({ minLength: 0,
                                               source: availableTags);     
            });

            function OnSelect(event, ui)
            {
                var item = ui.item;
                var itemLabel = item.label;
                var itemValue = item.value;

                $("#hidCidade").val(itemValue);
                $("#txtCidade").val(itemLabel);
            }

        </script>
    </head>
    <body>
        <form>
            <input id="hidCidade" type="hidden" />
            <input id="txtCidade" type="input" class="ui-autocomplete-input" />
        </form>
    </body>
</html>

拜托，有人可以帮我吗？

谢谢！

Answer 1

因为我也必须解决这个问题。我以为我会展示我的解决方案。恕我直言，它更清洁，因为你不需要单独的OnSelect和OnFocus功能。（尽管它确实和rperson最终做的一样）

$('#txtCidade').autocomplete({
  source: availableTags,
  focus: function(event, ui) {
    $(this).val(ui.item.label);
    return false;
  },
  select: function(event, ui) {
    $('#hidCidade').val(ui.item.value);
    $(this).val(ui.item.label);
    return false;
  }
});

Answer 2

将自动填充调用更改为以下内容：

$("#txtCidade").autocomplete({
    source: availableTags,
    select: function(event, ui) {
         $("#hidCidade").val(ui.item.label);
    }
});

单击自动填充项目时，

#txtCidade应自动加入所选标签。

在此处查看 jsFiddle example 。

Answer 3

我已经解决了为OnFocus和OnSelect创建处理程序并在每个处理器中返回false的问题。

        function OnFocus(event, ui)
        {
            $( "#txtCidade" ).val( ui.item.label );
            return false;
        }

        function OnSelect(event, ui)
        {
            var item = ui.item;
            var itemLabel = item.label;
            var itemValue = item.value;
            var campo = $("#txtCidade");

            $("#hidCidade").val(itemValue);
            $("#txtCidade").val(itemLabel);

            var campoValue = campo.val();
            var hidCampoValue = $("hidCidade").val();
            return false;
        }

JQuery UI自动完成 - 如何选择项目并在输入文本中维护标签（而不是值）

3 个答案: