jQuery UI自动完成：如何允许自由文本输入

Question

我想给用户添加自己的变量，而不仅仅是从建议中选择一个。但是当我在字段中输入一些内容并单击ENTER键时，我的表单提交了。

然后我尝试捕捉字段的keydown事件，但在这种情况下，我失去了使用箭头和回车键从建议中选择变量的可能性，因为ui参数未定义。

    $('#field_id').on('keydown', function(event) {
        if (event.keyCode == $.ui.keyCode.ENTER
            || event.keyCode == $.ui.keyCode.NUMPAD_ENTER)
        {

            $('#field_id').trigger('autocompleteselect');
        }
    });

    $('#field_id').autocomplete({
        source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}]
        minLength: 0
    }).on('autocompleteselect', function(event, ui) {
        // if I click on suggestion using mouse - everything is ok
        // but not for ENTER-key choosing

        // I want something like that:
        if (ui.item) {
              id = ui.item.id;
              value = ui.item.value;
        } else {
              id = 'my_new_item';
              value = $(this).val();
        }
        return false;
    });

- DrSat

---

我不确定为什么你的ui参数未定义......但是为什么不在if语句之前加上window.alert(event.keyCode)呢？然后你可以尝试使用回车和键盘回车来查看数字。 - rnirnber

也许你可以尝试使用keyup事件而不是keydown。 - rnirnber

Answer 1

如果您想要防止表单在按下回车键时提交，您可以使用preventDefault：

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

关于自动完成，请注意当按下回车键时触发“autocompleteselect”事件会导致用户在建议项目上按回车键时“autocompleteselect”处理程序被触发两次。为了避免这种情况和缺少UI参数，可以尝试使用响应回调将用户输入作为建议项添加，并将自动聚焦设置为true。

以下是一个示例，其中当自动完成没有匹配时，将用户输入添加到建议列表中。

$('#field_id').autocomplete({
    source: [{
        "id": "20",
            "value": "This is not mandatory decline reason"
    }, {
        "id": "21",
            "value": "You are have to be rejected"
    }],
    minLength: 0,
    autoFocus: true,
    response: function (event, ui) {

        if (ui.content.length == 0) {
            ui.content.push({
                label: "New Search value: " + $(this).val(),
                value: $(this).val(),
                id: 0
            });
        }
    }
}).on('autocompleteselect', function (event, ui) {
    id = ui.item.id;
    value = ui.item.value;

    return false;
});

这是一个以上内容的 jsfiddle 示例。

希望这能有所帮助。

- jfbalanc