Jquery select2 ajax autocomplete with PHP

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

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.