jQuery自动完成功能在没有时显示旧结果

时间:2017-11-03 10:35:31

标签: jquery ajax asp.net-mvc autocomplete

我正在使用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以及类控制器并且没有返回结果 - 空数组......这些不是问题的根源。

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

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

提前致谢!

2 个答案:

答案 0 :(得分:0)

试试这个:

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

答案 1 :(得分:0)

如果没有数据,则返回Empty对象作为响应,如下所示。希望这对你有用。

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