Блог

Я создал функцию поиска по каталогу и использую вызов ajax для файла в папке проекта. Это работает в Chrome и Firefox, но только иногда работает в Internet Explorer.

Я заставил его работать в Internet Explorer, но для этого мне нужно скопировать и вставить код в новую папку и надеяться, что это сработает. Это странное поведение, потому что я ничего не меняю в коде, и иногда это будет работать.

Если я заставлю его работать в Internet Explorer и скопирую / вставлю «рабочие» файлы — это не всегда работает снова.

Изначально я использовал какой-то ES6, который не поддерживается IE, но я исправил эти проблемы. Я думаю, что это может быть что-то не так с вызовом .ajax? Но я не могу понять, что.

Вызов AJAX

 function getADInfo(){
    $.ajax({
        url: "../../js/roster.json",
        method: 'GET',
        dataType: 'json',
        cache: false,
        success: function(data) {
            console.log('success from getADInfo');
            // employees.push(...data);
            Array.prototype.push.apply(employees, data);
        },
        error: function(err) {
            console.error(err);
        }
    });
}
  

Это должно выполнить поиск по файлу json и отобразить совпадения

 function findMatches(wordToMatch, employees) {
    return employees.filter(function(person) {
        var regex = new RegExp(wordToMatch, 'gi');
        var nameString = person.Name.split(", ")[1]   " "   person.Name.split(", ")[0];
        var displayFirstName = person.DisplayName.split(", ")[1];
        return person.GivenName.match(regex) || person.Surname.match(regex) || nameString.match(regex) || displayFirstName.match(regex);
    });
}

function displayMatches() {
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);

    // var html = matchArray.slice(0,10).map(person => {
    //     var regex = new RegExp(this.value, 'gi');
    //     var firstName = person.GivenName.replace(regex, `<span class="hl">${this.value}</span>`);
    //     var lastName = person.Surname.replace(regex, `<span class="hl">${this.value}</span>`);
    //     var extension;
    //     if (person.Phone_Ext1 !== null){
    //         extension = person.Phone_Ext1;
    //     } else {extension = "N/A"}

    //     return `
    //         <li class="search-item" data-id=${person.EmployeeID}>
    //             <span class="person">${firstName} ${lastName}</span>
    //             <span class="phone-ext">Ext. ${extension}</span>
    //         </li>
    //     `
    // }).join('');

    var html = [];

    for(var i=0; i < matchArray.slice(0,10).length; i  ){
        var person = matchArray.slice(0,10)[i];
        var regex = new RegExp(this.value, 'gi');
        var hilight = '<span class="hl">'   this.value   '</span>';
        var firstName = person.GivenName.replace(regex, hilight);
        var lastName = person.Surname.replace(regex, hilight);
        var extension;
        var showdisplayname;


        if (person.DisplayName.split(", ")[1] !== person.GivenName){
            showdisplayname = "("   person.DisplayName.split(", ")[1]   ")";
            showdisplayname = showdisplayname.replace(regex, hilight);
        } else {
            showdisplayname = "";
        }

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {
            extension = "N/A"
        }

        var list =
            '<li class="search-item" data-id='   person.EmployeeID  '>'  
            '<span class="person">'   firstName   ' '   lastName   ' '   showdisplayname   '</span>'  
            '<span class="phone-ext">Ext. '   extension   '</span>'  
            '</li>';

        html.push(list);
    }
    html = html.join('');

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}
  

Выпадающий список должен появляться при вводе, но в Internet Explorer ничего не происходит. Он отлично работает в других браузерах.
Когда я проверяю консоль, я получаю статус 200, но это ошибка

Пример