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.

search-form.php

<?php
/**
* 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>
</div>
</form>

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

$.ajax({
url:'fetch.php',
            type:'GET',
            data:'keyword='+key,
            beforeSend:function () {
                //$("#resultsearch").slideUp('fast');
            },
            success:function (data) {
                $("#resultsearch").html(data);
                $("#resultsearch").slideDown('fast');
            }
        });
    });
  });
   </script>

  <style>
  #resultsearch{
  width:100%;
  display: none;
  bordder-bottom:1px solid black;
  bordder-left:1px solid black;
  bordder-right:1px solid black; 
  }
  #resultsearch #item {
  box-sizing: border-box;
  padding:10px;
  font-size:18px;
  width: 100%;
  background: white;
  border-bottom:1px solid #bdbdbd;
  }
  </style>

fetch.php

<?php
if($_GET['keyword'] && !empty($_GET['keyword']))
{
 $conn=mysqli_connect("localhost","root","","sitedata");
 $keyword = $_GET['keyword'];
 $keyword="%$keyword%";
 $query = "select distinct name from names where name like ?";
 $statement = $conn->prepare($query);
 $statement->bind_param('s',$keyword);
 $statement->execute();
 $statement->store_result();
 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>';
        $statement->close();
        $conn->close();

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

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 *