自动完成值的应用而不是标签到文本框


86

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

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

<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查看源代码,可以看到我的隐藏字段正在正确更新。


1
您在Firebug的JSON响应中看到了什么?
SLaks 2011年

[{“ label”:“ Tom Smith”,“ value”:“ 1234”},{“ label”:“ Tommy Smith”,“ value”:“ 12321”}]
Diver Dan

Answers:


214

该默认行为select事件是更新inputui.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/


1
很有用!您是不是$("#selected-customer").val(ui.item.value);
要说

1
@juanignaciosl:否-该代码用于用label而不是来更新搜索框value
安德鲁·惠特克

我将值存储在db而不是标签中,所以下一次我想根据值设置标签。这样做的方式是什么?
parth.hirpara

1
嘿,尝试做类似的事情,但将所有内容都放在focus而不是中selectitem.value正在设置问题,而不是item.label。反正要规避这个吗? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
蝙蝠侠

同样在这里,我要显示标签,值POST。我确实设法解决了一个涉及隐藏元素的问题(类似于@Yang Zhang的以下回答,但目前看来,滚动自己的自动完成功能将是最不优雅的方法。)
Lori

15

只是想补充一点,而不是在selectfocus回调函数中通过“ id”引用输入元素,您可以使用选择器,例如:

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

当您为多个元素(例如,按类)分配自动完成功能时,此功能很有用:

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

8

就我而言,我需要在隐藏的输入中记录另一个字段“ 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');
            }
        }
    );

我认为关键是您可以添加除“标签”和“值”以外的任何其他数据字段。

我使用引导模态,它可以如下所示:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.