Live search like google
Hi, friends. I am coming with a new and interesting tutorial. I hope everybody like this post. Today, my topic is creating a live search box like google on your web page. Nowadays every people want to attach a live search option on their website. This tutorial will help them so much to do this on their website.
I have done this to using-
- PHP Codeigniter framework,
- jQuery,
- MySQL.
If you are using Codeigniter Framework, then this tutorial will be best for you. You need to follow the example code carefully and do it fast.
HTML Code
Without using a form on your website, you can do it just define a simple bootstrap search box. You need to use bootstrap.min.css CDN (content delivery network) for css. If you do not use bootstrap.min.css link, then use this link.
bootstrap.min.css:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap search box:
<input type="text" class="form-control custom-search" name="category_search_name" id="category_search_name" placeholder="Search term..."> <div> <ul id="more_result"></ul> </div>
Note: You must put an ID in the search box and id must be unique because your typing character gets by the ID and set character in a variable for passing values in URL.
jQuery
Before using jQuery code you must check if is jquery.min.js link on your page. If you need jquery.min.js link, then copy this link from below code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
Follow the script code, here first I have called a function name that is addText. This function work when your result will display and when you choose any character, the character will show in the search box. Here we add keyup event to the textfield. Inside this function, we use ajax to get data from the server side.
<script> function addText(Textval){ $('#category_search_name').val(Textval); $('#more_result').empty(); } $(document).ready(function(){ // this focus event while you are focusing on an input element.If you enter some text on this input ,its will be passing data in the category-search-name URL. $('#category_search_name').on('keyup',function(){ // Get value from the search box var search_text = $('#category_search_name').val(); // check value is exist or not if(search_text==""){ $('#more_result').empty(); }else{ $.ajax({ type: "POST", // data pass by POST method. url: "category-search-name", // This is the URL link where you sent the data. data: {search_name: search_text}, // search_text value store in the search_name variable and pass variable data by POST method. success: function(html){ console.log(html); // you can check result in the browser console. $("#more_result").html(html).show(); // when data get display a list "more_result" is the "UL" tag id name. } }); } }); }); </script>
Helpful Tutorial: Click here To know more about Jquery mouse events and examples
Create Route
Since you are using PHP Codeigniter framework so you need to define a route. Follow this example code for better understand.
$route['category-search-name'] = "SearchController/category_search_name";
category-search-name is the same name which I define in the Ajax.
SearchController is the Controller class name.
category_search_name is the function name that is user define.
Controller.php
Copy this example code and paste this code in your controller page. Here I call the method of the model class to get the data as per query string.
public function category_search_name(){ $search_name=$this->input->post("search_name"); // first get search character $data=$this->SearchModel->GetCatSearchName($search_name); // SearchModel is the model class name $view = ''; foreach ($data as $sval) { $view = $view .'<li onclick="addText(\''.$sval->post_category_name.'\')">'.$sval->post_category_name.'</li>'; } echo $view; }
Model.php
In the Model page, I simply add a select query using like operator in where clause. It will fetch the record and return to the controller.
public function GetCatSearchName($search_name){ $qry = $this->db->select('*')->from('Table Name') ->where("column name LIKE '%$search_name%'") ->get()->result(); // select data like rearch value. return $qry; }
Click Here: To Get Code of Twitter Login in Codeigniter
I hope this tutorial will be very helpful to you. Thanks for visiting our blog. Follow our blog site because we have more tutorial related different type of programming language. If you like this tutorial please share it on social media.
If you have any problem comment me, I will try to respond as soon as possible or you can ask a question here, Click for ASK Something.
Click Here: To Get Code of Insert MP3 Audio file in Codeigniter Framework
it must be like google search that result will come in the form of dropdown list and you can choose it from the keyboard with arrows keys.
if you can kindly update it.
thank you.
Nice one, you can pin your script to: http://www.scriptism.com/
Cheers !!