Skip to content

Instantly share code, notes, and snippets.

@finalwebsites
Last active July 7, 2022 12:20
Show Gist options
  • Save finalwebsites/360838bfce39f4890affae7b432d31a4 to your computer and use it in GitHub Desktop.
Save finalwebsites/360838bfce39f4890affae7b432d31a4 to your computer and use it in GitHub Desktop.
Example code for the Ajax live search tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax Live Search - DEMO</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<div class="page-header">
<h1>Ajax Live Search <small>DEMO</small></h1>
</div>
<form role="form" method="post">
<div class="form-group ajax-search">
<input type="text" class="form-control" id="keyword" placeholder="Enter keyword">
<ul id="content"></ul>
</div>
</form>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="live-search-demo.js"></script>
</body>
</html>
jQuery(document).ready(function($) {
$('#keyword').on('input', function() {
var searchKeyword = $(this).val();
if (searchKeyword.length >= 3) {
$.post('search.php', { keywords: searchKeyword }, function(data) {
$('ul#content').empty().addClass('active');
$.each(data, function() {
$('ul#content').append('<li><a href="example.php?id=' + this.id + '">' + this.title + '</a></li>');
});
}, "json");
} else {
$('ul#content').empty().removeClass('active');
}
});
});
<?php
define('DB_USER', 'ENTER_USER');
define('DB_PASSWORD', 'ENTER_PASSWORD');
define('DB_SERVER', 'localhost');
define('DB_NAME', 'ENTER_DBNAME');
if (!$db = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME)) {
die($db->connect_errno.' - '.$db->connect_error);
}
$arr = array();
if (!empty($_POST['keywords']) && strlen($_POST['keywords']) >= 3) {
$keywords = filter_var($_POST['keywords'], FILTER_SANITIZE_STRING);
$keywords = $db->real_escape_string($keywords);
$sql = "SELECT ID, post_title FROM wp_posts WHERE post_content LIKE '%".$keywords."%' AND post_status = 'publish'";
$result = $db->query($sql) or die($mysqli->error);
if ($result->num_rows > 0) {
while ($obj = $result->fetch_object()) {
$arr[] = array('id' => $obj->ID, 'title' => $obj->post_title);
}
}
}
echo json_encode($arr);
body { padding-top: 10px; }
.starter-template { max-width:640px;margin:0 auto;padding: 25px 15px; }
/* ajax live search */
.ajax-search { position: relative; }
.ajax-search ul { list-style-type:none;position:absolute;z-index:10;padding:0; }
.ajax-search ul.active { border:1px solid #ccc;background-color: #fff;padding:5px 0; }
.ajax-search ul li { background-color: #F5F5F5;margin:5px 10px;padding:5px 10px; }
@finalwebsites
Copy link
Author

finalwebsites commented Dec 29, 2019

This is the example code for the Ajax Live search tutorial on Web Development Blog.
Do you like to see that code in action? We've created also a working live search demo. If you have any questions, just post them here or post a comment via Web Development Blog.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment