Jquery Autocomplete in mvc if user types text which is not in autocomplete list

Question

Jquery Autocomplete UI in mvc .. If user enter some text which is not in list it should alert not in list ....

In View:-

 $("#loc").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/a/AutoLoc",
                        type: "POST",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            if (data.length == 0) {
                                alert('Please select an item from the list');
                                document.getElementById('Loc').value = "";
                                document.getElementById('Loc').focus();
                                document.getElementById('Loc').style.border = "solid 1px red";

                            }
                            else

                            response($.map(data, function (item) {
                                document.getElementById('Location').style.border = "solid 1px black";
                                return { label: item.Name, value: item.Name, id: item.LocationId };
                            }));





                        }
                    })
                },
                select: function (event, ui) {
                    $("#locationID").val(ui.item.id);

                }

            });

in Controller:

 public JsonResult AutoLoc(string term)
    {
        var result = (from r in db.S
                      where r.Name.ToLower().Contains(term.ToLower())
                      select new { r.Name, r.id }).Distinct();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Here suppose we enter 'a' then it will not alert any message . Though 'a' is not in list when we enter any character which is not in autocomplete list it should alert and make that box as red.

Actually What is happening in 'data' we are getting values because in controller we are writing a query as contains or startwith 'a' so value is returned but as a individual 'a' is not in list that starts with or contains 'a'.

Answer 1

In View:

$("#loc").autocomplete({    
        source: function (request, response) {
            $.ajax({
                url: "/a/AutoLoc",
            type: "POST",
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                var found = $.map(data, function(item) {
                    return {label: item.Name, value: item.Name, id: item.LocationId};
                });


                }
            });
        },
        change: function (event, ui) {                
            var referenceValue = $(this).val();
            var matches = false;

            $(".ui-autocomplete li").each(function () {
                if ($(this).text() == referenceValue) {
                    matches = true;
                    return false;
                }
            });

            if (!matches) {
                alert('Please select an item from the list');
                this.value = "";
                this.focus();
                this.style.border = "solid 1px red";
            }
            else {
                document.getElementById("submitbutton").disabled = false;
                this.style.border = "solid 1px black";
            }
        }



    });

Now when we type 'a' it will alert and show the box border in red color...... This is what i wanted....

Answer 2

Try this:

$("#loc").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/a/AutoLoc",
            type: "POST",
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                var found = $.map(data, function(item) {
                    return {label: item.Name, value: item.Name, id: item.LocationId};
                });
                if (found.length === 0) {
                    alert('Please select an item from the list');
                    $("#loc").val("");
                    $('#loc').focus();
                    $('#loc').css("border", "solid 1px red");
                } else {
                    $('#loc').css("border", "none");
                }
                response(found);
            }
        });
    },
    select: function(event, ui) {
        $("#locationID").val(ui.item.id);
    }
});