Home Ajax Jquery select2 ajax autocomplete with PHP

Jquery select2 ajax autocomplete with PHP

by Shahriar Sagor

Today now in this post i will show you How to use Jquery select2 ajax autocomplete PHP? We know that Jquery select2 plugin is a very famous and also very simple jquery plugin. By using select2 plugin we can do the several thing as like select box also with search, select option with the check box, ajax auto-complete etc.

We are normally need to do the autocomplete task with the select box when we are working with a large amount of data a like products, items, category, tag, user etc. So we can’t the load all then data at time and it’s hard to find that item from several records. So by using the select2 plugin with select box with search and Ajax dynamically auto complete on that way page will never need to load more and it will work fine also.

Now here in this example, we need two to file one ajax.php on that way it will give us user layout and another one ajaxpro.php that will give you items table records. Here i have also one “items” table in my database and also there are several records on that table. When i will search from the select box it will give me all the match result. Now this example we can run easily in our system too.

ajax.php

<html lang="en">
<head>
  <title>Jquery select2 ajax autocomplete example code with demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>


<div style="width:520px;margin:0px auto;margin-top:30px;height:500px;">
  <h2>Select Box with Search Option Jquery Select2.js</h2>
  <select class="itemName form-control" style="width:500px" name="itemName"></select>
</div>


<script type="text/javascript">
      $('.itemName').select2({
        placeholder: 'Select an item',
        ajax: {
          url: '/ajaxpro.php',
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: true
        }
      });
</script>


</body>
</html>

ajaxpro.php

define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "learn");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);


$sql = "SELECT items.id, items.title FROM items 
		WHERE title LIKE '%".$_GET['q']."%'
		LIMIT 10"; 
$result = $mysqli->query($sql);


$json = [];
while($row = $result->fetch_assoc()){
     $json[] = ['id'=>$row['id'], 'text'=>$row['title']];
}


echo json_encode($json);

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like