使用 pagination.js 和/或 PHP 进行 Ajax 搜索

Question

我想做一个可以通过给定特定 URL 触发的搜索（我在这里尝试使用 ajax 和 javascript，但我也对 php 变体感到满意）。 我有 2 个需求阶段（都应该用 pagination.js 显示）：

1. 当我访问例如： https://<.myDomain.>/search/234x15以将值自动放入输入和过滤器中或在整个数据库中进行搜索。
2. 当我去例如： https://<.myDomain.>/search我想对整个数据库进行 POST 搜索。

我的一般问题是我不能包含 MySQL 或其他数据库，我仅限于 JSON 或对象/数组（JS/php）。

使用我当前的解决方案使用大 JSON 文件处理 900 个项目后，我会在 5-8 秒后得到响应，这太长了。 我需要填写至少 3500 项。

这是我提出的解决方案：

    <script>
    
    var currentKeywords = $(location).attr('pathname');
    var currentKeywordsFiltered = currentKeywords.replaceAll('+',' ');
    const toBeSearched = currentKeywordsFiltered.split('/')[2];
    
    $('#search-input').attr('value', toBeSearched);
    
    var myArray = <?php echo json_encode($products_merged) ?>;


    $(document).ready(function(){
        console.log('Url keyword: ', toBeSearched);
        var data = searchTable(toBeSearched, myArray);
        buildTable(data);
        
        (function(name) {
            var container = $('#pagination-' + name);
            container.pagination({
              dataSource: data,
              locator: 'dataSource',
              totalNumber: 50,
              pageSize: 20,
                    showPageNumbers: true,
                    showPrevious: true,
                    showNext: true,
                    showNavigator: true,
                    showFirstOnEllipsisShow: true,
                    showLastOnEllipsisShow: true,
              ajax: {
                beforeSend: function() {
                  container.prev().html('Loading...');
                }
              },
              callback: function(response, pagination) {
                window.console && console.log(22, response, pagination);
                        var dataHtml = '';
                            $.each(response, function (index, dataSource) {
                              dataHtml += 
                              '<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
                                  + '<div class="card-body">'
                                    + '<a href="..'+ dataSource.slug + '/" ><h5 class="card-title"><b>'+ dataSource.title +'</b></h5></a>'
                                    + '<a href="..'+ dataSource.slug + '" class="btn btn-danger" style="background-color:#c4151b">Vezi specificatii</a>'
                                  + '</div>'
                              + '</div>';
                            });
                        dataHtml += '';
        
                container.prev().html(dataHtml);
              }
            })
          })('demo');
        });
    
    
    $('#search-input').on('keyup', function(){ 
        var value = $(this).val();
        console.log('value: ', value);
        
        var data = searchTable(value, myArray);
        buildTable(data);
        
        (function(name) {
        var container = $('#pagination-' + name);
        container.pagination({
          dataSource: data,
          locator: 'dataSource',
          totalNumber: 50,
          pageSize: 20,
                showPageNumbers: true,
                showPrevious: true,
                showNext: true,
                showNavigator: true,
                showFirstOnEllipsisShow: true,
                showLastOnEllipsisShow: true,
          ajax: {
            beforeSend: function() {
              container.prev().html('Loading data from db...');
            }
          },
          callback: function(response, pagination) {
            window.console && console.log(22, response, pagination);
                    var dataHtml = '';
                        $.each(response, function (index, dataSource) {
                          dataHtml += 
                          '<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
                              + '<div class="card-body">'
                                + '<a href="https:..'+ dataSource.slug + '" ><h5 class="card-title"><b>'+ dataSource.title +'</b></h5></a>'
                                + '<a href="https:..'+ dataSource.slug + '" class="btn btn-danger" style="background-color:#c4151b">Vezi specificatii</a>'
                              + '</div>'
                          + '</div>';
                        });
                    dataHtml += '';
    
            container.prev().html(dataHtml);
          }
        })
      })('demo');
    });
    
    
    $(function(){ 
        if(toBeSearched === undefined){
            buildTable(myArray); 
            (function(name) {
                var container = $('#pagination-' + name);
                container.pagination({
                  dataSource: myArray,
                  locator: 'dataSource',
                  totalNumber: 50,
                  pageSize: 20,
                        showPageNumbers: true,
                        showPrevious: true,
                        showNext: true,
                        showNavigator: true,
                        showFirstOnEllipsisShow: true,
                        showLastOnEllipsisShow: true,
                  ajax: {
                    beforeSend: function() {
                      container.prev().html('Loading...');
                    }
                  },
                  callback: function(response, pagination) {
                    window.console && console.log(22, response, pagination);
                    var dataHtml = '';
                        $.each(response, function (index, dataSource) {
                          dataHtml += 
                          '<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
                              + '<div class="card-body">'
                                + '<a href="..'+ dataSource.slug + '" ><h5 class="card-title"><b>'+ dataSource.title +'</b></h5></a>'
                                + '<a href="https:..'+ dataSource.slug + '" class="btn btn-danger" style="background-color:#c4151b">Vezi specificatii</a>'
                              + '</div>'
                          + '</div>';
                        });
                    dataHtml += '';
            
                    container.prev().html(dataHtml);
                  }
                })
            })('demo');
        }
    });
    
    
    function searchTable(value, data){
        var filteredData  = [];
    
            for(var i = 0; i < data.length; i++){
    
                value = value.toLowerCase();
                var name = data[i].title.toLowerCase();
                
                if(name.includes(value)){
                    filteredData.push(data[i])
                }
        }
        return filteredData;
    }
    
    
        
    function buildTable(data){
        var table = document.getElementById('myTable');
        table.innerHTML = '';
        for (var i = 0; i < data.length; i++){
            
            var row = `<tr>
                            <td>${data[i].title}</td>
                            <td></td>
                            <td></td>
                       </tr>`;
            table.innerHTML += row;
        }
    };
</script>

我的问题是我可以采用哪些架构解决方案，或者我如何改进我的代码以提高效率。

PS：我尝试通过抓取网址首先使用php提交来完成它，并且我在处理页面上使用标题进入无限循环。