Ajax live search in wordpress

I am trying to implement ajax live site for a wordpress site.I think i am partially successful in doing that.I was able to make search result come down as a list as shown in the picture.Shows the ajax result list.

I tried to get the answer from various sites,but it’s not fitting my requirement or is incomplete.

(1) I also need to make the result clickable by making that as a link.

(2) I also need to make result list navigatable by keys(arrow keys and other related keys like Page up,etc.)

(3) I also need to add placeholder effect or autocomplete effect(don’t know the
exact name for that).Refer to picture for knowing what i meant.Shows what i meant in (3).

(4) I also need to increase security to improve protection to prevent this from various attacks like SQL injection,etc.

(5) I also need to include users in the search result.
There are 2 files of code,search-form and fetch.php.
Below is the part of the code i used for implementing just the Ajax result list.


* Template for search form.

<form id="search-form" class="search-form" action="<?php echo 
get_link_to('search' ); ?>">
<button class="bt-search-btn" type="submit"><?php _e('Search', 
'question-answer' ); ?></button>
<div class="search-inner no-overflow">      
<input name="s" id="searchbox" type="text" class="search-input 
form-input" placeholder="<?php _e('Search for Answers...', '
question-answer' ); ?>" value="<?php echo sanitize_text_field( 
get_query_var('s' ) ); ?>" />
<div id="resultsearch"></div>

<script src="jquery.js"></script>
$(document).ready(function () {
$("#searchbox").on('keyup',function () {
var key = $(this).val();

            beforeSend:function () {
            success:function (data) {

  display: none;
  bordder-bottom:1px solid black;
  bordder-left:1px solid black;
  bordder-right:1px solid black; 
  #resultsearch #item {
  box-sizing: border-box;
  width: 100%;
  background: white;
  border-bottom:1px solid #bdbdbd;


if($_GET['keyword'] && !empty($_GET['keyword']))
 $keyword = $_GET['keyword'];
 $query = "select distinct name from names where name like ?";
 $statement = $conn->prepare($query);
 if($statement->num_rows() == 0) //so if we have 0 records acc. to     
                                 //keyword display no records found
        echo '<div id="item">Ah snap...! No results found :/</div>';

  else {
        while ($statement->fetch()) //outputs the records
            echo "<div id='item'>$name</div>";

Thanking in advance.

Read more here: Ajax live search in wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *