Как улучшить производительность автозаполнения и динамический источник для автозаполнения

Question

У меня есть выпадающий список для выбора категории и текстовое поле для поиска из выбранной категории.Я хочу добавить автозаполнение для поиска в текстовом поле, который запрашивает из таблицы с 5000+ записей и будет продолжать расти.Но когда я набираю текстовое поле, браузер зависает.Кроме того, когда я изменяю категорию после поиска из другой категории, в автозаполнении отображаются элементы из предыдущей категории: например,

, у меня есть категория транспортное средство , и выполняется поиск грузовик .При автозаполнении будут отображаться элементы с truck , а когда я изменил категорию на location : и при поиске AN , при автозаполнении все элементы будут отображаться с AN НО после выбора элемента из автозаполнения будут отображаться элементы категории транспортное средство с AN .

Я использую https://github.com/Pixabay/jQuery-autoCompleteдля автозаполнения.

Это php, который запрашивает поиск с категорией:

<?php
    include('config.php'); 
    include('db.php');

    $category = $_POST['category'];

    $query = "SELECT DISTINCT ".$category." FROM data";
    $result = mysqli_query($conn, $query);

    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = array(
            'category' => $row[$category]
        );
    }
    echo json_encode($data); ?>

, и это функция для генерации источника

function loadCategory(category) {
    var source = [];

    $.ajax({
        type: "POST",
        url: "data.php",
        data: {
            'category' : category
        },
        dataType: "json",
        success: function(result) {                           
            $.each(result, function(i, val) {
                source.push(val.category);
            });

        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }                    
    });

    $('#searchTextbox').autoComplete({
        source: function(term, suggest) {
            term = term.toLowerCase();
            var matches = [];
            for (i=0; i<autocompleteArray.length; i++) {
                if (~source[i].toLowerCase().indexOf(term)) matches.push(source[i]);
                suggest(matches);
            }
        },
        requestDelay: 300
    });
}

.Вызывается, когда выпадающий список для изменения категории значения.

Спасибо заранее!