0

我希望用户能够输入自动完成的文本框，但如果找不到，我希望它提交已写入内容的文本而不是值（在本例中为 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="" />

更改事件没有触发 - 知道为什么吗？

4

1 回答 1

0

我认为这有几个问题。

  1. 改变事件，如果值已更改，而不是按键。
  2. 选择器似乎有问题，如果您将 class 或 id 添加到输入中，它可以工作。
  3. 警报中的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());
            }
        });
    });
});
于 2012-07-22T14:36:14.197 回答