finalwebsites/index.html

## index.html
<!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>

## live-search-demo.js
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');
		}
	});
});

## search.php
<?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);

## starter-template.css
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; }
	<!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; }