Question

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

在视图中： -

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

                }

            });

控制器中的

：

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

这里假设我们输入了一个＆＃39;然后它不会提醒任何消息。虽然＆＃39; a＆＃39;不在列表中当我们输入任何不在自动完成列表中的字符时，它应该提醒并将该框设为红色。

实际上＆＃39;数据＆＃39;正在发生什么？我们正在获取价值，因为在控制器中我们正在编写一个包含或开头的查询＆＃39; a＆＃39;因此返回价值，但作为个人＆＃39; a＆＃39;不在列表中，或者包含＆＃39; a＆＃39;。

Answer 1

试试这个：

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

Answer 2

在视图中：

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



    });

现在当我们输入'a'时，它会提醒并显示红色的方框边框...... 这就是我想要的......

如果用户键入不在自动完成列表中的文本，则在mvc中自动完成Jquery

2 个答案: