I want to share jQuery autocomplete function for quick development but within custom template format.
First you should have to know about autocomplete function.
Instead of the user having to type out the full value of the input field each time, the autocomplete widget offers suggestions as to what the value might be.
For example, let’s say you’re adding a new product. The product field could be a text input, a
select input, and so on. In this scenario, one would use the existing product in the system as
the source for an autocomplete widget. Chances are, the user who is entering the product, or
another user for that matter, has entered that product before. With autocompletes, users have
some assurance that they’re providing valid inputs.
The normal autocomplete function example:
<!doctype html><htmllang=”en”><head> <metacharset=”utf-8″> <title>jQuery UI Autocomplete – Default functionality</title> <linkrel=”stylesheet”href=”//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css”> <scriptsrc=”//code.jquery.com/jquery-1.10.2.js”></script> <scriptsrc=”//code.jquery.com/ui/1.11.0/jquery-ui.js”></script> <linkrel=”stylesheet”href=”/resources/demos/style.css”> <script> $(function() { var availableTags = [ “ActionScript”, “AppleScript”, “Asp”, “BASIC”, “C”, “C++”, “Clojure”, “COBOL”, “ColdFusion”, “Erlang”, “Fortran”, “Groovy”, “Haskell”, “Java”, “JavaScript”, “Lisp”, “Perl”, “PHP”, “Python”, “Ruby”, “Scala”, “Scheme” ]; $(“#tags” ).autocomplete({ source: availableTags }); }); </script></head><body><divclass=”ui-widget”> <labelfor=”tags”>Tags:</label> <inputid=”tags”></div> </body></html>
Output:
After having simple understanding of autocomplete, now dive into realtime useful but little complicated example.
Here data I get is by calling controller named ‘ajax_suggest_username_to_tag’ . The controller is getting data from model and is echoed back to view by encoding it to json format.
$(‘.listen_comment_post’).autocomplete({
source : baseurl + ‘tags/index/ajax_suggest_username_to_tag’,
minLength : 1,
select : function (event, ui)
{
console.log(ui);
//$(‘#post_tag’).val(ui.tag_name);
//current_tag_list = $(‘#post_tag_list’).val();
}
}).data(“autocomplete”)._renderItem = function (ul, item) {
var inner_html = ‘<a><div class=”show_user_on_comment”><figure><img height=”30px” src=”‘+item.label+'”></figure><div class=”search_dtail_P”><p class=”user_name”>’+item.username+'</p><p class=”full_name”>’+item.first_name+'</p></div><div class=”clear”></div></div></a>’;
return $(“<li></li>”)
.data(“item.autocomplete”, item)
.append(inner_html)
.appendTo(ul);
};
My PHP code:
Controller:
function ajax_suggest_username_to_tag()
{
$tags_list = $this->tags_model->ajax_suggest_username_to_tag();
print_r(json_encode($tags_list));
die();
}
Model:
public function ajax_suggest_username_to_tag()
{
$cur_member_id = $this->session->userdata(‘current_member_id’);
$q=$this->input->get(‘term’);
$key = $q;
//Old query
//$sql_rees= $this->db->query(“select * from member_login_type where first_name like ‘%$q%’ or last_name like ‘%$q%’ order by member_id LIMIT 5”);
//New query updated 04-02-2014
$sql_rees= $this->db->query(“select * from member_login_type where member_id != $cur_member_id and login_status = ‘active’ and ((first_name like ‘%$q%’ or last_name like ‘%$q%’) OR (CONCAT(first_name,’ ‘,last_name) like ‘%$q%’) or username like ‘%$q%’) order by member_id LIMIT 5″);
if($sql_rees->num_rows >0)
{
$all_list = array();
$all_result = $sql_rees->result_array();
//START: To be solved by KAMALA JI
// echo ‘<ul>’;
foreach( $all_result as $row)
{
$username = $row[‘username’];
$fname=$row[‘first_name’];
$lname=$row[‘last_name’];
$img=$row[‘profile_image’];
$country=$row[‘address’];
$re_fname='<b>’.$q.'</b>’;
$re_lname='<b>’.$q.'</b>’;
$re_username='<b>’.$q.'</b>’;
$final_fname = str_ireplace($q, $re_fname, $fname);
$final_lname = str_ireplace($q, $re_lname, $lname);
$final_username = str_ireplace($q, $re_username, $username);
// echo ‘<li><a href=”‘.base_url().$username.'”>’;
if(is_file(FCPATH .MEMBER_UPLOAD_THUMBS.’28×26/’.$img))
{
//echo base_url().MEMBER_UPLOAD_THUMBS.’83×73/’.$img;
$profile_image = base_url().MEMBER_UPLOAD_THUMBS.’28×26/’.$img;
}
else
{
//echo IMG_DIR.’no_image.jpg’;
$profile_image = IMG_DIR.’no_image.jpg’;
}
//echo ‘<figure><img height=”30px” src=”‘.base_url().MEMBER_UPLOAD.$img.'”/></figure>’;
// echo ‘<div class=”search_dtail_P”>’;
//echo ‘<p class=”user_name”>’.$final_username.'</p>’;
// echo ‘<p class=”full_name”>’.$final_fname.$final_lname.'</p>’;
// echo ‘<p class=”country”>’.$country.'</p>’.'</div>’;
//echo ‘<div class=”clear”></div></a><li>’;
array_push($all_list,array(“value”=>$username,”username”=>$final_username,”label”=>$profile_image,”first_name”=>$final_fname)); }
return $all_list;
}
return false;
//echo ‘<li><a href=”‘.base_url().’user/search/see_all/’.$q.'”>See All Result for ‘.$q.'</a></li>’;
// echo ‘</ul>’;
}
But I was getting below error:
—————————-ERROR————————
TypeError: $(…).autocomplete(…).data(…) is undefined
| }).data(“autocomplete”)._renderItem = function (ul, item) { |
After some research I also found solution as listed below:
——————SOLUTION————————
data(‘ui-Autocomplete’)resolved my troubles.
Hope this article helps you to creating your autocomplete box as in Facebook or other sites.