jquery ui自动完成：仅在未选择项目时触发

Question

我试图弄清楚如何使 jquery ui 选择的“相反”。当有人没有选择一个选项而只是输入“jquery something”时，输出将是： “新输入：jquery 的东西”。 However when the "jquery" is selected it would be nice to somehow only have "selected from list: jquery", and prevent the keypress propogation.但是，这两个事件都会触发。我正在努力做到这一点。

<input class="test" type="text" />

<script>
$('.test').autocomplete({
    select: function (event, ui) {
        alert('selected from list: ' + ui.item.label);
        event.preventDefault();
        return false;
    },
    source: ["jquery", "jquery ui", "sizzle"]
});
$('.test').live('keypress', function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        alert('new input: ' + $(this).val());
    }
});
</script>

这是假设“输入”键用于从 ui 的菜单中选择一个选项。

Answer 1

您可以使用autocompletechange 事件来完成此操作。使用此事件，您可以确定用户是否选择了选项或输入了不在列表中的内容：

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function(event, ui) {
        console.log(this.value);
        if (ui.item == null) {
            $("span").text("new item: " + this.value);
        } else {
            $("span").text("selected item: " + ui.item.value);
        }
    }
});

示例： http://jsfiddle.net/Ne9FH/