Question

我希望用户能够键入自动填充的文本框，但如果找不到它，我希望它提交已写入的文本而不是值（在本例中为projectId）。

我目前的想法是捕获更改事件（查看注释掉的代码），然后更新隐藏字段，该字段将通过模型绑定传递给ASP.NET MVC控制器。

我的javascript看起来像这样：

    $(function () {

        $('*[data-autocomplete-url]')
        .each(function () {
            $(this).autocomplete({
                source: $(this).data("autocomplete-url"),
                minLength: 2,
                select: function (event, ui) {
                    $(this).next('input:hidden').val(ui.item.value);
                    $(this).val(ui.item.label);
                    return false;
                },
                focus: function (event, ui) {
                    $(this).next('input:hidden').val(ui.item.value);
                    $(this).val(ui.item.label);
                    return false;
                },
                change: function (event, ui) {
                    alert(ui.item.value);

                    //if (ui.item.value == null) {
                    //    $(this).next('input:hidden').val(ui.item.label);
                    //}
                }
            });
        });
    });

我的HTML看起来像这样：

<label for="ProjectID">Project</label>
<input type='text' data-autocomplete-url='/Projects/GetProjectsByUser' />\
<input id="ProjectID" name="ProjectID" type="hidden" value="" />

更改事件不触发 - 任何想法为什么？

Answer 1

我认为这有几个问题。

change事件在字段模糊时触发，如果值已更改，则不会在按键时触发。
选择器似乎存在问题，如果您在输入中添加了类或ID，则可以正常工作。
ui.item 报告为null，因此ui.item.value根本不会触发警报框。相反，我把 $（this）.val（），最后它返回插入的文本。

这是我稍微修改过的代码：

<label for="ProjectID">Project</label>
<input class.='ac' type='text' data-autocomplete-url='/Projects/GetProjectsByUser' />
<input id="ProjectID" name="ProjectID" type="hidden" value="" /> 

$(function () {       
    $('.ac').each(function () {
        $(this).autocomplete({
            source: $(this).data("autocomplete-url"),
            minLength: 2,
            select: function (event, ui) {
                alert('se');
                $(this).next('input:hidden').val(ui.item.value);
                $(this).val(ui.item.label);
                return false;
            },
            focus: function (event, ui) {
                alert('f');
                $(this).next('input:hidden').val(ui.item.value);
                $(this).val(ui.item.label);
                return false;
            },
            change: function (event, ui) {
                alert($(this).val());
            }
        });
    });
});

如何在jquery自动完成中启动更改事件

1 个答案: