title: Ajax search with pagination.js and/or PHP
body: <p>I want to do a search that can be triggered by given a specific URL (I tried with ajax and javascript here but im happy with a php variant also). I have 2 requirement phases (both should be displayed with pagination.js):</p>
  <ol>
  <li>When I access  eg.: <strong>https://&lt;.myDomain.&gt;/search/234x15</strong> to put
  the value inside the input and the filter automatically or make the
  search over the whole database.</li>
  <li>When I would go to eg.: <strong>https://&lt;.myDomain.&gt;/search</strong> I want to make POST search over the whole database.</li>
  </ol>
  <p>My general problem is that I cannot include MySQL or other databases, I am limited to either JSON or objects/arrays (JS/php).</p>
  <p>With my current solution processing 900 items using a big JSON file gets me a response after 5-8 seconds which is too long. And I will need to fill in with at least 3500 items.</p>
  <p>Here is the solution I made:</p>
  <pre><code>    &lt;script&gt;
      
      var currentKeywords = $(location).attr('pathname');
      var currentKeywordsFiltered = currentKeywords.replaceAll('+',' ');
      const toBeSearched = currentKeywordsFiltered.split('/')[2];
      
      $('#search-input').attr('value', toBeSearched);
      
      var myArray = &lt;?php echo json_encode($products_merged) ?&gt;;
  
  
      $(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 &amp;&amp; console.log(22, response, pagination);
                          var dataHtml = '';
                              $.each(response, function (index, dataSource) {
                                dataHtml += 
                                '&lt;div style=&quot;border: 1px solid #888888; border-radius: 5px; margin: 15px;&quot; class=&quot;col-md-2&quot;&gt;'
                                    + '&lt;div class=&quot;card-body&quot;&gt;'
                                      + '&lt;a href=&quot;..'+ dataSource.slug + '/&quot; &gt;&lt;h5 class=&quot;card-title&quot;&gt;&lt;b&gt;'+ dataSource.title +'&lt;/b&gt;&lt;/h5&gt;&lt;/a&gt;'
                                      + '&lt;a href=&quot;..'+ dataSource.slug + '&quot; class=&quot;btn btn-danger&quot; style=&quot;background-color:#c4151b&quot;&gt;Vezi specificatii&lt;/a&gt;'
                                    + '&lt;/div&gt;'
                                + '&lt;/div&gt;';
                              });
                          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 &amp;&amp; console.log(22, response, pagination);
                      var dataHtml = '';
                          $.each(response, function (index, dataSource) {
                            dataHtml += 
                            '&lt;div style=&quot;border: 1px solid #888888; border-radius: 5px; margin: 15px;&quot; class=&quot;col-md-2&quot;&gt;'
                                + '&lt;div class=&quot;card-body&quot;&gt;'
                                  + '&lt;a href=&quot;https:..'+ dataSource.slug + '&quot; &gt;&lt;h5 class=&quot;card-title&quot;&gt;&lt;b&gt;'+ dataSource.title +'&lt;/b&gt;&lt;/h5&gt;&lt;/a&gt;'
                                  + '&lt;a href=&quot;https:..'+ dataSource.slug + '&quot; class=&quot;btn btn-danger&quot; style=&quot;background-color:#c4151b&quot;&gt;Vezi specificatii&lt;/a&gt;'
                                + '&lt;/div&gt;'
                            + '&lt;/div&gt;';
                          });
                      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 &amp;&amp; console.log(22, response, pagination);
                      var dataHtml = '';
                          $.each(response, function (index, dataSource) {
                            dataHtml += 
                            '&lt;div style=&quot;border: 1px solid #888888; border-radius: 5px; margin: 15px;&quot; class=&quot;col-md-2&quot;&gt;'
                                + '&lt;div class=&quot;card-body&quot;&gt;'
                                  + '&lt;a href=&quot;..'+ dataSource.slug + '&quot; &gt;&lt;h5 class=&quot;card-title&quot;&gt;&lt;b&gt;'+ dataSource.title +'&lt;/b&gt;&lt;/h5&gt;&lt;/a&gt;'
                                  + '&lt;a href=&quot;https:..'+ dataSource.slug + '&quot; class=&quot;btn btn-danger&quot; style=&quot;background-color:#c4151b&quot;&gt;Vezi specificatii&lt;/a&gt;'
                                + '&lt;/div&gt;'
                            + '&lt;/div&gt;';
                          });
                      dataHtml += '';
              
                      container.prev().html(dataHtml);
                    }
                  })
              })('demo');
          }
      });
      
      
      function searchTable(value, data){
          var filteredData  = [];
      
              for(var i = 0; i &lt; 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 &lt; data.length; i++){
              
              var row = `&lt;tr&gt;
                              &lt;td&gt;${data[i].title}&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                         &lt;/tr&gt;`;
              table.innerHTML += row;
          }
      };
  &lt;/script&gt;
  </code></pre>
  <p>My question would be which architectural solutions i could go towards or how can I improve my code so it can be more efficient.</p>
  <p>PS: I tried doing it first with php submission by grabbing the url and I was ending up in infinite loop using header on processing page.</p>