javascript - 想要阻止在 jQuery UI AutoComplete 中选择特定项目

Question

我正在使用 jQuery UI Autocomplete 开发具有自动完成功能的文本框。之后，我可以创建具有自动完成功能的文本框，但现在出现了一个问题。

在我的文本框中，我想阻止从自动完成列表中选择特定项目。如果我选择特定项目，自动完成列表会再次显示或不关闭。

$(function (prefixText) {
            $("textBox").autocomplete({
                autoFocus: false,
                minLength: 0,
                delay: 50,
                source: function (request, response) {

                    var data = "{ 'prefixText': '" + prefixText
                            + "','count': '" + 30
                            + "','pixWidth': '" + 100 + "' }";

                    $.ajax({
                        type: "POST",
                        url: "Example.asmx/" + method,
                        cache: false,
                        data: data,
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.name,
                                    id: item.id,
                                    name: item.name
                                }
                            }))
                        }
                    });
                },
                select: function (event, ui) {
                    var id = ui.item.id
                    //not match guid type
                    if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
                        if ($("text_id") !== null) {
                            $("text_id").val(-1);
                        }
                        return false
                    }
                    else {
                        if ($("text_id") !== null) {
                            $("text_id").val(ui.item.id);
                        }
                        $("textBox").val(ui.item.name);
                    }
                }
            });
        });
});

如果有人知道答案，请教我。

Answer 1

基于此处的示例:How to disable element in jQuery autocomplete list我认为这段代码适合您:

    $(function (prefixText) {
        $("textBox").autocomplete({
            autoFocus: false,
            minLength: 0,
            delay: 50,
            source: function (request, response) {

                var data = "{ 'prefixText': '" + prefixText
                        + "','count': '" + 30
                        + "','pixWidth': '" + 100 + "' }";

                $.ajax({
                    type: "POST",
                    url: "Example.asmx/" + method,
                    cache: false,
                    data: data,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.name,
                                id: item.id,
                                name: item.name
                            }
                        }))
                    }
                });
            },
            select: function (event, ui) {
                var id = ui.item.id
                //not match guid type
                if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
                    if ($("text_id") !== null) {
                        $("text_id").val(-1);
                    }
                    return false
                }
                else {
                    if ($("text_id") !== null) {
                        $("text_id").val(ui.item.id);
                    }
                    $("textBox").val(ui.item.name);
                }
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            //Add the .ui-state-disabled class and don't wrap in <a> if value is empty
            var id = item.id
            if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
                return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
            } else{
                return $("<li>")
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
            }
        };
    });

如果您可以提供代码的工作版本(这些项目也可以来自预定义列表，而不是基于 ajax 调用)，那么提供帮助会更容易。