【问题标题】:jQuery autocomplete shows old results when nonejQuery自动完成显示旧结果时没有
【发布时间】:2018-04-16 01:28:35
【问题描述】:

我正在使用 jQuery 自动完成功能,但遇到了问题。 当源中没有结果而不是在自动完成中没有得到任何建议时,我会得到以前建议的结果。

这是我的代码:

$("#searchEmployeeSkillSelectorDashboard").autocomplete(
    {

    source: function (request, response) {
        $.ajax({
            url: '/Skills/SkillsSearch',
            data: "{ 'prefix': '" + request.term + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function(data) {

                if (data.length > 0) {
                    response($.map(data, function (item) {

                    return item;

                    }));
                }
                /*else {

                 noResult = { label: "No results found" };
                 response($.map(noResult, function(item) {

                     return item;

                    }));

                }*/

            },
           error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    },
    select: function (e, i) {

        if (i.item.val == null)
            return;

        var selected_skills = [];

        $("#skillSearchSelectedItems").find("div").each(function () { selected_skills.push(this.id); });

        for (var s = 0; s < selected_skills.length; s++) {
            if (selected_skills[s] == i.item.val) {

                var modal = $('#reportsModal');
                modal.text("The skill: " + i.item.label + " is already in the skill search list!");

                return;
            }
            else {
                var modal = $('#reportsModal');
                modal.text("");
            }
        }

        var newSkillDiv = $('<div class="span8" style="border:0.5px solid;margin:5px;padding:5px;border-radius:5px;" name="' + i.item.label + '" id="' + i.item.val + '"><p class="text-info">' + i.item.label + '</p> <span style="color:#a8a8a8;">    Skill Level:   </span><select class="span1 grades"><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>   <span style="color:#a8a8a8;">Months worked on :</span><select class="span2 months"><option value="1">1 to 3 Months</option><option value="2">3 to 6 Months</option><option value="3">6 to 12 Months</option><option value="4">1 to 3 Years</option><option value="5">3 to 6 Years</option><option value="6">More than 6 Years</option></select>   <span style="color:#a8a8a8;">Last used :</span><input type="text" data-date-format="dd/mm/yyyy" class="datepicker span2 lastused"  placeholder="Last date used" >               <i onclick="removeSkillDiv(\'' + i.item.val + '\')" style="float:right" class="icon-remove"></i></div>');

        $('#skillSearchSelectedItems').prepend(newSkillDiv);
    },
    close: function (e, i) {
        this.value = '';
        $('#searchEmployeeSkillSelectorDashboard').val('');
        $(".datepicker").datepicker({ dateFormat: "dd/mm/yyyy" });
    },
    minLength: 0
}).click(function () {
    $(this).autocomplete('search', $(this).val());
    }
    );

这部分有问题

success: function(data) {

                if (data.length > 0) {
                    response($.map(data, function (item) {

                    return item;

                    }));
                }
                /*else {

                 noResult = { label: "No results found" };
                 response($.map(noResult, function(item) {

                     return item;

                    }));

                }*/

            }

由于我无法强制自动完成以清空提案:

Should not be getting data picture - here I should be getting no results

检查了 Json 和 Class 控制器并且没有返回任何结果 - 空数组...这些不是问题的根源。

此外,当我删除 else 中的注释部分时,它工作正常 - 显示“未找到结果” - 这是我想强制空数组的地方(不希望显示任何内容)。

我尝试在 else 块中返回一个空数组,但它运行 ajax 自动完成而不结束 - 显示平滑的屏幕并永远加载而不会停止。

提前致谢!

【问题讨论】:

    标签: jquery ajax asp.net-mvc autocomplete


    【解决方案1】:

    试试这个:

    success: function(data) {
            if (data.length > 0) {
                response($.map(data, function(item) {
                    return item;
                }));
            } else {
                this.value = ''
            }
        }
    

    【讨论】:

    • 我得到了和以前一样的结果——重复以前的建议。
    • @VladimirKocisTubic 你可以在 jsfiddle 上创建一个演示吗?
    • 由于我使用 ajax 作为源,这对我来说并不是那么简单。
    • 我想知道为什么简单的 return: 在 else 块在这里也不起作用......
    【解决方案2】:

    在没有数据的情况下返回空对象作为响应,如下所示。希望这对你有用。

    success: function(data) {
            if (data.length > 0) {
                response($.map(data, function(item) {
                    return item;
                }));
            } else {
                response([]);
            }
        }
    

    【讨论】:

    • 看看这个。我创建了一个小提琴,如果没有返回数据,它就可以在这里工作。奇怪的是它不适合你。 jsfiddle.net/Makarand_Patil/32Bck/1622
    • 你做的也很奇怪,尝试输入 "hllll" ,你会得到没有包含所有字母的结果。
    • 检查链接好友。我已经使用谷歌搜索链接来获取结果。所以搜索结果与谷歌搜索自动完成相同。我的意图只是在使用 ajax 输入一些文本时获取一些数据,并在服务没有返回数据时显示为空。在 google 中搜索 hllll,你会得到和我一样的自动完成结果。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多