Question

我有一个下拉框用于选择类别，文本框用于从所选类别中进行搜索。我想为从具有5000多个条目的表中查询的文本框搜索添加自动完成功能，并且该功能将继续增加。但是，当我在文本框中键入内容时，浏览器将冻结。同样，当我从其他类别搜索后更改类别时，自动完成功能会显示上一个类别的项目：

例如，我有一个车辆类别，并搜索了卡车。自动完成将显示具有卡车的项目，当我将类别更改为位置时：搜索 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
    });
}

当类别的下拉框更改值时调用该函数。

谢谢前进！

如何提高自动填充性能和自动填充的动态来源

0 个答案: