Hello Reader's, If you are making searching and want to look it as ajax which show records then this blog is helpful to you. In this blog, we will make it for CodeIgniter framework. Ajax searching will show the matching results from the typed words.

So let's get started to build this.

Step 1:- Create a simple HTML search boxare and it's code will go like this:-

<form method="get" id= "homeSearch" name="carSearch" action="<?php echo base_url();?>browse/HomeSearch" autocomplete="off">
            <div class="search-filters pull-left">
    <input type="text" name="home_search"  placeholder="Search"  id="ajax_search" class="pull-left">
     <ul id="show_search_results"  class= 'autoSearch'></ul>
   
 <input type="submit" name="searchinghome" class="searchIcon" value="Submit">
              
          
          </form>

In the code above we have created a simple form with a textbox as a searching field. On typing this text box the ajax will auto show the matching records from the database. Now we will complete it's ajax request.
 

Step 2: Create the javascript code at the bottom of this page. It is js code will go like this:-

    $("#ajax_search").keyup(function () {
        $.ajax({
      type: "POST",
      url: webUrl+'userSite/SearchAutoComplete',
      data: ({string: $("#ajax_search").val()}),
      success: function(data) {

        $("#show_search_results").show();  
       $("#show_search_results").html(data); 

       $('#show_search_results > li > a').click(function(){
        var search_resultList = $(this).text();
        $("#ajax_search").val(search_resultList); 
        $("#show_search_results").hide();         
      });
      }      
    }); 
   });

Step 3:-  Now create a controller with name user.php and write a new function in it with name SeachAutoComplete. And write the code for getting the letter which is typed by a user. Its code will go like this:-

    //this is an auto suggets for searching the search, usages ajax
          public function SearchAutoComplete(){
		  
            $results = $this->usersitemodel->SearchAutoComplete();
            $html = "";
            $i =0;
            if(count($results)>0)
            {
              foreach ($results as $value) {
               $html[] = "<li ><a href='javascript:void(0)' onclick = 'pick()'>".$value['listing_title']."</a></li>";
              }
            echo implode(" ",$html);

            }
          }

The function SearchAutoComplete will store the records which will matches with other records from a database, print them with their HTML. This HTML will auto render below the searching text box. 

Step 4: You have got the letter which user had typed for searching. Create a model which will take fetch the matching records from database and it's code will go like this:-

  public function SearchAutoComplete(){
        $current_date = date('Y-m-d h:i:s');    
          $this->db->select('id,listing_title');
          $this->db->from('listings');
           $this->db->like('listing_title', trim($this->input->post('string')), 'both');    
           $this->db->where('deleted', '0');    
           $this->db->where('sold', '0');    
           $this->db->where('blocked', '0');      
           $this->db->limit(10);
           $query = $this->db->get();
           $results = $query->result_array();
            return $results;
            } 

In the code above we have written a simple select query of CodeIgniter to fetch the matching result with a limit of max 10. Now you have run this code and your text box starts showing the matching result at its bottom. The Output of this searching can be seen in the screenshots below.