Want to prevent selecting specific item in jQuery UI AutoComplete

Question

I am developing textbox with autocomplete using jQuery UI Autocomplete. After that, I can create textbox with autocomplete, but one issuce has occured now.

In my textbox, I want to prevent selecting specific item from autocomplete list. If I select specific item, Autocomplete list display again or not to close.

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

If someone know answer, please teach me.

Answer 1

Based on the example from here: How to disable element in jQuery autocomplete list I think this code will work for you:

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

If you can provide a working version of your code (the items can also be from a predefined list, not based on ajax call) it will be much easier to help.