jQuery UI 自动完成：强制从列表中选择而不进行修改答案

【问题标题】：jQuery UI autocomplete: enforce selection from list without modificationsjQuery UI 自动完成：强制从列表中选择而不进行修改
【发布时间】：2013-04-29 02:16:31
【问题描述】：

我正在使用Autocomplete combobox with Knockout JS template / JQuery中提供的自定义绑定

我需要强制用户必须在自动完成列表中选择一个值，并且在他们选择该值后不能向选择添加其他文本。我已经搜索过，但找不到如何防止输入其他文本的示例。它必须保持可编辑，以防他们选择了错误的下拉菜单，但他们输入的内容必须 100% 与列表中的值匹配。

我发现this 在 jquery 上发帖，但它已经 9 个月大了，没有人发布答案。

【问题讨论】：

标签： javascript jquery-ui jquery knockout.js

【解决方案1】：

没有内置函数可以做你想做的事。

我做了一个简单的项目，其中使用自动完成 change 事件，您必须从自动完成中选择值，如果不是，则删除该值。

更改事件

当字段模糊时触发，如果值发生变化。

选择后该字段被禁用，您可以使用激活锚来激活它（例如）。

代码：

$("#artist").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                    'format': "json",
                    'search': request.term
            },
            success: function (data) {
                response(data[1]);
            }
        });
    },
    change: function (event, ui) {
        if (ui.item == null || ui.item == undefined) {
            $("#artist").val("");
            $("#artist").attr("disabled", false);
        } else {
            $("#artist").attr("disabled", true);
        }
    }
});

$('#changeArtist').click(function (e) {
    e.preventDefault();
    $("#artist").attr("disabled", false);
});

这是一个小提琴：http://jsfiddle.net/IrvinDominin/nH4Nx/

【讨论】：

【解决方案2】：

这是一篇较旧的帖子，但我认为从用户体验的角度来看，由于焦点问题，它有点不完整（直到焦点从输入中移除后才会进行更改，在本例中为“#artist”，相当烦人），所以我会补充：

   select: function (event, ui) {
        $("#artist").attr("disabled", false);
    }

所以（假设它是我们尝试启用的按钮）用户在选择后立即看到启用的对象。

【讨论】：