Question

我正在试图找出如何使用jquery ui select的“对立面”。当有人没有选择一个选项并只输入“jquery something”输出时： “新输入：jquery的东西”。但是当选择“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/

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

1 个答案: