jQuery UI Autocomplete in CodeIgniter with Images and Database

autocomplete_images_featured

autocomplete_images

I have decided to write this tutorial after receiving many requests on how to use the jQuery UI Autocomplete widget in CodeIgniter to display images along with the retrieved data. To avoid repetition, I made this tutorial as a continuation for a previous one titled jQuery UI Autocomplete in CodeIgniter with Database, so if you are looking to learn the basics about using the jQuery UI Autocomplete widget in CodeIgniter with database then please refer to that tutorial.

For a complete working tutorial you are encouraged to read my previous tutorial titled “jQuery UI Autocomplete in CodeIgniter with Database”

The code in this tutorial works perfectly and if you follow this tutorial and the previous one carefully you should have no problem.

For this tutorial we need to modify the following:

1- CSS
2- Database table
3- CodeIgniter Model
4- JavaScript and jQuery code

1- CSS

Here, let’s decide how our list item will look.

<div class="list_item_container">
    <div class="image"><img src="eider.jpg"></div>
    <div class="label">Common Eider</div>
    <div class="description">Somateria mollissima</div>
</div>

The above HTML will not be included in our final code, it’s just for illustration. However will add the following CSS classes to control how images and texts will look like. So go on and add the following CSS to the main CSS file in your CodeIgniter project.

.list_item_container {
    width:300px;
    height: 60px;
    padding: 5px 0;
}
.image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    float: left;
}
.description {
    font-style: italic;
    font-size: 0.8em;
    color: gray;
}

2- Database table

To be able to display images from the database you obviously need to add a new column to the database table that holds the name of the image to be displayed with each record. Referring to the previous tutorial you will find that we created a database table named Birds so go on and modify that table and add a new column and simply name it image.

3- CodeIgniter Model (birds_model.php)

In the previous tutorial we created a CodeIgniter model and named it Birds_model so go on and modify the code in your model as follows.

<?php
//birds_model.php (Array of Objects)
class Birds_model extends CI_Model{
	function get_bird($q){
		$this->db->select('*');
		$this->db->like('bird', $q);
		$query = $this->db->get('birds');
		if($query->num_rows > 0){
			foreach ($query->result_array() as $row){
				$new_row['label']=htmlentities(stripslashes($row['bird']));
				$new_row['value']=htmlentities(stripslashes($row['bird']));
				$new_row['description']=htmlentities(stripslashes($row['aka']));
				$new_row['image']=htmlentities(stripslashes($row['image']));
				$row_set[] = $new_row; //build an array
			}
			echo json_encode($row_set); //format the array into json data
		}
	}
}

4- JavaScript and jQuery code

Finally, we will modify the JavaScript and jQuery code to create the autocomplete and overriding _renderItem() method.

$(document).ready(function(){
	$("#birds").autocomplete({
		source: "birds/get_birds" // name of controller followed by function
	}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="img/' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append(inner_html)
            .appendTo( ul );
    };
});
If someone wants to use this code with an older version of JQuery UI (version used in this tutorial is 1.9.2) change .data( “ui-autocomplete” )._renderItem to .data( “autocomplete” )._renderItem

Thank you for reading and I hope this post was helpful. If you like this post please share, tweet, +1 etc.

You can also let me know if this post was helpful to you by leaving a comment.

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

jQuery UI Autocomplete in CodeIgniter with Images and Database
16 votes, 3.44 avg. rating (69% score)
  • Posted in: CodeIgniter
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • Reyhan Sofian Haqqi

    thanks a lot..this is what i’ve looking for..

  • lepotier

    Hello, thanks for this script. I have a problem, the response in Firedebug is the html code from my current page ‘:) Any idea ?

  • Komal

    Lovely.. Thanks a tons.

  • Niaz Prodhan

    Thanx for this useful post. But I got one query that, how I’ll be writing a select event in the autocomplete you used in this case . Thnx in advance.

  • freddy

    Hello husamaldin, Thanks for your sharing to be honest i’m new bie at codeigniter about 1 month and now i got job in company which call it “Software House”, about 3 days learn about auto complete so i found your blog can solve my problem and now i got sick and can’t spend more in front of laptop, would you give me source code sidaurukfreddy@gmail.com to help understand it ! so i upload my dummy , hope you help me out eventhough just idea after i get well i will learn it, Many Thanks

    Bye the way i’m Freddy Sidauruk from Indonesia

    (Junior Dev)

  • freddy

    Here is the form

  • jong

    how can I convert a blob and display it as image in browser?

  • Quang Nhật

    please tell me how to display the link after search success, example when you search image and click it, it will be direct to page of that image, and have all infomation of that image.