Bootstrap Typehead Demo with PHP and MySql

  511 views   4 months ago PHP

In this post, i am going to show you how to integrate dynamically Autocomplete utilizing typeahead dynamic. In this post, i give you a full example that way you can run this example facilely in your project. after running this example you can optically discern output like bellow preview.

First, we will engender ajax.html file for HTML layout in this file I integrated jquery and Bootstrap Typeahead code. When you indite on the input box then you can find Dynamic Autocomplete search utilizing ajax request. So, first, engender aja.html file and replicate bellow code.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TypeHead Js Demo With PHP</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>
<body style="background-color: #fff;padding-top: 5rem;">
	<div class="container text-center">
	    <div class="row">
	        <div class="col-md-12">    
	            <h4 class="title">Dynamic Autocomplete search using Bootstrap Typeahead JS Example</h4>
	        </div>
	    </div>
	    <div class="col-md-12">    
            <div class="form-group">
                <div class="col-md-12">
                    <input id="search" type="text" class="typeahead form-control" name="search" value="" autofocus placeholder="Search">
                </div>
            </div>
	    </div>
	</div>
    <script type="text/javascript">
    	alert();
        $('.typeahead').typeahead({
		    source:  function (query, process) {
	        return $.get('/getdata.php', { query: query }, function (data) {
	        		console.log(data);
	        		data = $.parseJSON(data);
		            return process(data);
		        });
		    }
		});
    </script>
</body>
</html>

Ok, now we require to engender another page for getting json data by ajax requiest. So engender another page ajaxpro.php file and facsimile bellow code.

getdata.php

<?php

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


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

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


	echo json_encode($json);

i hope you like this article.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles