title: PHP Ajax live search with load more
body: <p>I would like if I scroll bottom of .dropdown-menu, load more 7 row in database. I don't know why not using this script.
  I'm using bootstrap css and js.
  I tried the bootstrap-select.js with live search, but I have 2000 row in "town" database, and bootstrap-select doesn't have "load more" function.</p>
  
  <pre><code>&lt;meta charset="utf-8"&gt;
  
  &lt;link rel="stylesheet" href="bootstrap.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;.dropdown-menu{height: auto;max-height: 150px;overflow-x:hidden;}&lt;/style&gt;
  
  &lt;div class="dropdown"&gt;
  
      &lt;input class="dropdown-toggle" data-toggle="dropdown" id="live" placeholder="Town"&gt;
      &lt;ul class="dropdown-menu"&gt;&lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  
  $(document).ready(function () {
  
      var limit = 7;
      var start = 0;
      var action = 'inactive';
      var location = $('#live').val();
  
      $('.dropdown-menu').hide();
  
      function search() {
  
          var limit = 7;
          var start = 0;
          var action = 'inactive';
          var location = $('#live').val();
  
          if (location != '') {
  
              $('.dropdown-menu').show();
  
              $.ajax({
  
                  url: "search.php",
                  type: "POST",
                  data: {location:location, limit:limit, start:start},
                  cache: false,
                  success: function(data) {
  
                      $('.dropdown-menu').html(data);
  
                      if(data == '') {
  
                          $('#load').text('No more data.');
                          action = 'active';
  
                      } else {
  
                          $('#load').text('Loading...');
                          action = 'inactive';
  
                      }
  
                      $('.dropdown-menu li a').click(function() {
  
                          $('.dropdown-menu li a').removeClass('active');
  
                          $(this).addClass('active');
  
                          var active = $('li a.active').html();
  
                          $('#live').val(active);
  
                      });
  
                  }
  
              });
  
          } else {
  
              $('.dropdown-menu').hide();
  
              $('.dropdown-menu li a').removeClass('active');
  
          }
  
      };
  
      if (action == 'inactive') {
  
          action = 'active';
          $('#live').on('keyup change', search);
  
      }
  
      $(window).scroll(function(){
  
          if ($(window).scrollTop() + $(window).height() &gt; $(".dropdown-menu").height() &amp;&amp; action == 'inactive') {
  
              action = 'active';
              start = start + limit;
              setTimeOut(function(){
                  $('#live').on('keyup change', search);
              }, 1000);
  
          }
  
      });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>search.php:</p>
  
  <pre><code>&lt;?php
  
  $connect = mysqli_connect("localhost", "root", "", "mydb");
  
  $location = $connect-&gt;real_escape_string($_POST["location"]);
  
  if (isset($_POST["location"])) {
  
      $data = mysqli_query($connect, "SELECT * FROM towns WHERE town LIKE '%".$location."%' ORDER BY id LIMIT ".$_POST["start"].", ".$_POST["limit"]."");
  
      $data_count = mysqli_num_rows($data);
  
      if ($data-&gt;num_rows === 0) {
  
          echo '&lt;li&gt;No data!&lt;/li&gt;';
  
      } else {
  
          while ($row = mysqli_fetch_array($data)) {
  
              echo '&lt;li&gt;&lt;a href="#"&gt;'.$row["town"].'&lt;/a&gt;&lt;/li&gt;';
  
          }
  
          echo '&lt;div id="load"&gt;&lt;/div&gt;';
  
      }
  
  }
  
  ?&gt;
  </code></pre>