jquery autocomplete widget example in codeigniter

jquery autocomplete widget example in codeigniter 

// Controller code


public function product_autocomplted(){
$term = $this->input->get('term',true);

$product_autocomplted_q = $this->db->query("SELECT mstproducts.ProductName,mstproducts.ProductID,trnproductimg.Img from mstproducts JOIN trnproductimg on trnproductimg.ProductID = mstproducts.ProductID WHERE mstproducts.ProductName like '%$term%' group by mstproducts.ProductID");
//echo $this->db->last_query();
$i=0;
$data = array();
$count  = $product_autocomplted_q->num_rows();

if($count >0 ){

foreach ($product_autocomplted_q->result_array() as $row){
$data['data'][$i]['lable'] = $row['ProductName'];
$data['data'][$i]['value'] = $row['ProductID'];
$data['data'][$i]['desc'] = $row['Img'];
$i++;

}

}
       
       
        view => html file
         <style>
  .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </style>

  <script>
  jQuery( function() {

var url = "<?php echo base_url(); ?>common/product_autocomplted";


    jQuery( "#search_pp_products,#seach_product_2_pp_products" ).autocomplete({

      source: url,
  //source:project,
      minLength: 2,
      select: function( event, ui ) {


jQuery('body').on("click",".ui-menu-item",function(){



var productid = jQuery(this).find('.ggyy').attr('href');
var productname = jQuery(this).find('.ggyyy').text();
productname = productname.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-')

window.location = "<?php echo base_url(); ?>product-details/"+productname+"/"+productid;

});

return false;

  

      }

    } )

  .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

var html = '';


jQuery.each(item, function(i) {






html =  jQuery( "<li>" )
  .append( "<div class='row'> <div class='col-xs-3'><img id='theImg' src='http://pajjama.in/ProductImg/"+item[i].desc+"'/></div>")
               .append( "<div class='col-xs-9 ggyyy'><a>" + item[i].lable +"</a></div></div><a style='display:none' class='ggyy' href='"+item[i].value+"' ></a>")
               .appendTo( ul );;

 
});
//alert(html)


return html;


             
            }

  } );
  </script>
 
 
  <div class="search-cart ui-widget">



      <input id="search_pp_products" name="q" placeholder="Search" type="text">
     
 

     



      <button type="button" ><i class="fa fa-search"></i></button>



    </div>