Question

我在尝试使自动完成工作正常时遇到了麻烦。

对我来说这一切都很好......但是......

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

但是，当我从下拉列表中选择一个项目时，该值已应用于文本框而不是标签。

我做错了什么？

如果我使用firebug查看源代码，我可以看到我的隐藏字段正在正确更新。

Answer 1

select事件的默认行为是使用input更新ui.item.value。此代码在事件处理程序之后运行。

只需返回false或致电event.preventDefault()即可防止此情况发生。我还建议为focus事件执行类似操作，以防止ui.item.value被放置在input中，因为用户将鼠标悬停在选项上：

$("#customer-search").autocomplete({ /* snip */ select: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); }, focus: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); } });

示例： http://jsfiddle.net/andrewwhitaker/LCv8L/

Answer 2

只想添加而不是通过＆＃34; id＆＃34;引用输入元素;在选择和聚焦回调函数中你可以使用这个选择器，如：

$(this).val(ui.item.label);

在为多个元素分配自动完成功能时非常有用，即按类：

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});

Answer 3

在我的情况下，我需要在隐藏的输入中记录另一个字段'id'。所以我在ajax调用返回的数据中添加了另一个字段。

{label:"Name", value:"Value", id:"1"}

并在列表底部添加了“创建新”链接。单击“创建新”，将弹出一个模态，您可以从那里创建新项目。

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

我认为重点是你可以添加除'label'和'value'之外的任何额外数据字段。

我使用bootstrap模式，它可以如下所示：

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>

自动填充应用值而非标签到文本框

3 个答案: