JQuery自动完成 - 强制选择

时间:2013-09-10 13:31:58

标签: javascript jquery json

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

$(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
                        }
                    }));
                }
            });
        }
    })
});

1 个答案:

答案 0 :(得分:7)

试试这个:

我在这里使用本地列表,但您也可以通过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 for it: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 = ''; }
}