In Today's Website, Most of the time we have to search something that should appear on page dynamically. For this we have to implement dynamic search also called live search using Ajax,Jquery in codeigniter with the use of Mysql database.
We will made a request from ajax and pass to the php controller and get a response in json object and will show the content on search box dynamically.
1. tbl_user_detail
CREATE TABLE `tbl_user_detail` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(100) NOT NULL,
`dob` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. tbl_news
CREATE TABLE `tbl_news` (
`news_id` int(11) NOT NULL auto_increment,
`news_section` int(11) NOT NULL,
`news_title` varchar(255) NOT NULL,
`news_category` int(11) NOT NULL,
`created_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1
Insert Some data in both Table.
Step:2 Now Create Codeigniter Controller Class (Main.php) .
In this controller class ,will create searching() function ,search keyword will pass on this function and in this function model class Home_model() will be called for database query logic and get back to response in json object.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Main extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->model('Home_model');
}
public function searching()
{
$search= $this->input->post('search_name');
$search_cat_id = $this->input->post('search_cat');
$query = $this->Home_model->searching($search,$search_cat_id);
$view = '';
foreach ($query as $sval) {
if(isset($sval->news_id))
{
$title = implode(' ', array_slice(explode(' ', $sval->news_title), 0, 8));
$view = $view .'<b><li onclick="addText(\''.$title.'\')">
<a href = "'.base_url("news_detail/").base64_encode($sval->news_id).'/'.str_ireplace("", "-", $title).'">'.$title.'...'.'</a></li></b>';
}
else if(isset($sval->user_id))
{
$view = $view .'<b><li onclick="addText(\''.$sval->name.'\')">
<a href = "'.base_url("user_profile/").base64_encode($sval->user_id).'/'.str_ireplace("", "-", $sval->name).'">'.$sval->name.'</a></li></b>';
}
}
$view = $view . '<a href=""><li style="color:#0d4ca2;">See All Results</li></a>';
echo $view;
}
}
Here will get 2 parameters from ajax, search_cat means category from which table you want to get response news or users and 2nd search keyword means what do you want to search from that tables.
Step:3 Now Create Codeigniter Model Class (Home_Model.php)
Create function name searching in model class.
public function searching ($keyword,$search_cat_id)
{
if($search_cat_id == 1)
{
$table = 'tbl_user_detail';
$cond = "name LiKE '%$keyword%'";
}
else if($search_cat_id == 2)
{
$table = 'tbl_news';
$cond = "news_title LiKE '%$keyword%'";
}
$qry = $this->db->select('*')->from($table)
->where($cond)
->limit(7,0)
->get()->result(); // select data like rearch value.
//echo $this->db->last_query(); die();
return $qry;
}
Step:4 Create View Page (HTML,CSS,Jquery,Ajax)
1. HTML
<select id="search_cat">
<option value="1" selected>Users</option>
<option value="2">News</option>
</select>
<div id="searching">
<input type="text" class="form-control" name="category_search_name" id="category_search_name" placeholder="Search Users...">
<ul id="more_result"></ul>
</div>
2. CSS
<style>
#category_search_name {
background-color: lightyellow;
outline: medium none;
padding: 8px;
width: 500px;
border-radius: 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 2px solid orange;
}
#more_result {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
width: 500px;
}
#more_result li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#more_result li:hover {
background:#4e6e84;
transition: 0.5s ease;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
}
</style>
3. Jquery ,Ajax Script
<script>
function addText(Textval){
$('#category_search_name').val(Textval);
$('#more_result').empty();
}
$(document).ready(function(){
$('select#search_cat').on('change', function() {
if(this.value == 1)
{
$('#category_search_name').attr('placeholder','Search Users...');
}
else if(this.value == 2)
{
$('#category_search_name').attr('placeholder','Search News...');
}
});
$('#category_search_name').on('keyup',function(){
var search_cat = $( "#search_cat option:selected" ).val();
var search_text = $('#category_search_name').val();
if(search_text==""){
$('#more_result').empty();
}else{
$.ajax({
type: "POST",
url: "<?php echo base_url('main/searching')?>",
data: {search_name: search_text,search_cat: search_cat },
success: function(html){
console.log(html);
$("#more_result").html(html).show();
}
});
}
});
});
</script>
Now you can do yourself.
