Skip to content

Instantly share code, notes, and snippets.

@finalwebsites finalwebsites/index.html
Last active Dec 29, 2019

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner 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
You can’t perform that action at this time.