javascript - JQuery 自动完成 - 强制选择

Question

我有一个使用 JQuery 自动完成功能的表单，它运行良好。现在我需要另一个元素来强制用户在自动完成输入中选择一个有效的选项。他们可以输入他们想要的任何内容，所有内容都会被自动完成过滤。但是他们必须从服务列表中选择一些东西。 如果他们不这样做，则输入字段必须空白。尝试了一些变化并选择无济于事。这是我的自动完成代码。我看到了一些使用数据而不是源进行操作的示例。这似乎有很大的不同

$(function () {
    $("#sp_name").autocomplete({
        minLength: 2,
        delay: 300,
        source: function (request, response) {
            $.ajax({
                url: "./Search/",
                dataType: "json",
                data: {
                    term: request.term,
                    zoekterm: $("#al").html()
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.naam,
                            value: item.naam
                        }
                    }));
                }
            });
        }
    })
});

Answer 1

试试这个:

我在这里使用的是本地列表，但您也可以通过 json 数据源来实现。 只需添加一个更改事件。唯一的问题是如果用户不点击 建议，它将变为空白(即使用户输入与建议相同的文本)。 用户必须点击建议。

var list = ["c", "c++", "c#","Basic","Mongo"];

$('#auto').autocomplete({
source: list,

select: function (event, ui) {
    $(this).val(ui.item ? ui.item : " ");},

change: function (event, ui) {
    if (!ui.item) {
        this.value = '';}
//else { Return your label here }
}
}); 

它的 JsFidle:http://jsfiddle.net/sarcastic/7KdZP/112/

In your case, Change function would be something like this:

change: function (event, ui)
{
if (!ui.label) { this.value = ''; }
}