Bootstrap Typehead Demo with PHP and MySql
source link: https://www.laravelcode.com/post/bootstrap-typehead-demo-with-php-and-mysql
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bootstrap Typehead Demo with PHP and MySql
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
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 [email protected]
</div
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK