Jquery autocomplete dropdown and select id with php and codeigniter

Few days ago I was implementing a drop-down/combo-box for selecting from a huge data, So thought to use jquery autocomplete plugin. But I was very upset while looking for the autocomplete use so that I can select the id to post, I did not find any good resource or documentation about this, I searched over internet and got some post but not what I am looking for. I just wanted to implement the autocomplete for a textbox and after selecting a value I’ll get the id of the value to post. We will discuss on this topic today

Assume there are lots of customers in our db we’ll make a selection of the customer id with jquery autocomplete.

Firstly, We need to include jquery, and autocomplete plugin. You can find jquery easily, for autocomplete go to the link http://jquery.bassistance.de/autocomplete/ and get jquery.autocomplete.js and jquery.autocomplete.css. Include the files to your head of the html.

Then make a form like bellow :

<form method="post" action="action.php">
    <label class="frmInput">A field</label> <input type="text" name="a_field" id="aField" />
    <label class="frmInput">A field</label> <input type="text" id="customerName" /> <!-- This field will be used for autocomplete -->
    <input type="hidden" name="customer_id" id="customerId" /> <!-- This field will be posted -->
</form>

Secondly, Now we need to make a php script , here we’ll use a codeigniter controller method. Using codeigniter there is a problem for the plugin because It usually send the request to the server with get method but by default codeigniter turn off query strings. So what can we do? Go to the jquery.autocomplete.js file and search for the ajax method and add the type as post for it. Now autocomplete will send the search parameter with post method. Now we need to make the function for search our customer based on the search query :

public function ajax_customer_search() {
    $q = isset($_POST['q']) ? $_POST['q'] : "";
    $limit = isset($_POST['limit']) ? $_POST['limit'] : "";
    $result = $this->db->query("SELECT * FROM customers WHERE name LIKE '%$q%' ORDER BY name ASC LIMIT 0,$limit")->result();
    $customers = array();
    foreach($result as $customer) {
        echo "{$customer->id}:$customer->name\n";
    }
}

Lastly, We need to make the script for the autocomplete:

$(document).ready(function(){

    $("#customerName").autocomplete(baseUrl+"/customer/ajax_customer_search", {  //we have set data with source here
        formatItem: function(rowdata) { //This function is called right before the item is displayed on the dropdown, so we splitted and returned what we show in the selection box
            var info = rowdata[0].split(":");
            return info[1];
        },
        formatResult: function (rowdata) { // This function is called when any item selected, here also we returned that what we wanted to show our customerName field.
            var info = rowdata[0].split(":");
            return info[1];
        }
    }).result(function(event, data, formatted){ //Here we do our most important task 🙂
            if(!data) { //If no data selected set the customer_id field value as 0
                $("#customerId").val('0');
            } else { // Set the value for the customer id
                var info = formatted.split(":");
                $("#customerId").val(info[0]);
            }
    });

});

And It’s done ! I hope you like it !

Advertisements

, , , , ,

  1. #1 by Thomas Tremain on November 2, 2012 - 4:04 PM

    I made a few changes to this, but cannot get it to work. First off, I do not use codeignighter, so I modified the PHP portion accordingly, and it is functioning.

    That also means I didn’t have to force a POST, so I did not modify the autocomplete library.

    I don’t know if you’d be willing to offer any assistance or not, but if you are, you can contact me privately by email, and I can give you a test URL. I’d be happy to return and post what I had done differently/wrong.

  2. #2 by Thomas Tremain on November 2, 2012 - 4:11 PM

    I should add, my error is: TypeError: value is undefined http://mydomain.com/js/jquery.autocomplete.js line: 429

    • #3 by Rashedul Islam Sumon on November 3, 2012 - 4:14 PM

      You can contact with me, I’d like to help you no problem. I think you made a very simple mistake here.

  3. #4 by veer on December 7, 2012 - 5:43 PM

    where s mvc of codeigniter here?

  4. #5 by ulmi on March 18, 2013 - 6:42 AM

    actually i’m really new in a programming language, i confuse about changing ajax method to post. .would you like to show me how is it?

  5. #6 by www.mozibee.com/community/link/95 on April 28, 2013 - 5:39 PM

    I really like what you guys are usually up too.
    This kind of clever work and reporting! Keep up the superb works guys
    I’ve incorporated you guys to blogroll.

  6. #7 by www.seoorganics.net on May 7, 2013 - 1:34 PM

    Quality posts is the main to be a focus for
    the users to pay a quick visit the website, that’s what this site is providing.

  7. #8 by Muscle Extreme Reviews on August 6, 2013 - 6:03 AM

    I for all time emailed this webpage post page to all my associates, since if
    like to read it afterward my links will too.

  8. #9 by Anton on January 15, 2014 - 12:32 PM

    I’m new in php programming and i’m very confuse about this tutorial,.
    could u give me the complete example file?
    thx

  9. #10 by Sarika on April 1, 2015 - 1:39 PM

    i am getting error TypeError: $(…).autocomplete is not a function. can you sugeest solution?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: