Question

我正在努力解决这个问题，但仍然没有得到解决方案，尝试了很多链接和代码，但面临一些问题需要解决这个问题。

ISSUE：

我有一个输入类型'Text'来搜索员工姓名。当我开始输入像'WY'这样的字符时，它会显示所有以WY开头的名字。

一旦我得到了我需要的员工，我就可以将其转移到其他控件和运行PDF报告（在另一个标签中加载）。问题是当我回到我应该再次开始搜索员工的页面时，它不会搜索！如下图所示：

这是我的ajax代码：

 $("#EmployeeSearchBox").bind('input propertychange', function () {
    if ($('#EmployeeSearchBox').val() != '') {
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },                
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

UI控件：

 <input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" />

请让我知道，我应该做些什么来解决这个问题。

Answer 1

这可能是问题的原因

DOM中可能无法使用$("#EmployeeSearchBox").bind('input propertychange', function () { ..});。

要确保EmployeeSearchBox和propertyChange处理程序是否仍处于活动状态，请在propertychange函数中放置一个警报。如果显示警报，则问题出在其他地方。

$("#EmployeeSearchBox").bind('input propertychange', function () {
    if ($('#EmployeeSearchBox').val() != '') {

         alert("Inside Property Change "); // Add this alert
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },                
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

再次绑定它是什么意思

这是将EmployeeSearchBox与DOM $("#EmployeeSearchBox").bind('input propertychange', function () {....绑定的函数，当您移动到PDF选项卡并再次返回到SearchBox选项卡时，此元素的绑定将丢失，这意味着DOM不知道在EmployeeSearchBox上触发属性更改时要执行的操作。两种解决方法

1）确保即使在标签之间导航，事件处理程序也始终存在于DOM中。

2）如果在您的方案中无法实现选项1，请在进入搜索选项卡时重新绑定事件处理程序。当您在搜索选项卡中时，显式调用此$("#EmployeeSearchBox").bind。

Answer 2

请检查是否已为第二次搜索引发了ajax调用..如果不是，则在条件检查区域或函数调用方法中必定存在问题。我总是使用这个功能来搜索数据

$("input").change(function(){
  ajax call.....
})

Answer 3

正在恭维Clement Amarnath＆＃34;提供的建议，这有助于我解决这个问题。

我找到了此的修复程序，而不是使用 .Bind（），我在（文档）中使用了 .on（），我发布了我修复过的答案。谢谢大家！

$(document).on("input propertychange", "#EmployeeSearchBox", function () {  

    if ($('#EmployeeSearchBox').val() != '')        {
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },
            //error: function (XMLHttpRequest, textStatus, errorThrown) {
            //    alert(textStatus);
            //}
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

注意：下面的线也有效： .live（）方法

$("#EmployeeSearchBox").live('input propertychange', function () {... });

单击按钮后自动搜索（ajax调用）不起作用

3 个答案: