jquery ui autocomplete:仅在未选择项目时触发

Question

我试图弄清楚如何使jquery ui select的"相反".当有人没有选择一个选项并且只输入"jquery something"时,输出将是:"new input:jquery something".然而,当选择"jquery"时,以某种方式只有"从列表中选择:jquery"并且阻止按键传播将是很好的.然而,两件事都引发了火灾 我试图让它成为一个或另一个.

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