Change jQuery autosuggest to 2 column dropdown

I often have the problem that the autosuggest isn’t flexible enough, and I need to show contact name AND client name in the drop down

Here is a way you can ‘hack’ the default set up:

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
    var new_string = "<div style='width:450px;'>
                      <div style='width:200px; float:left;'>" + 
                      item.contactname + 
                      <div>" + item.companyname + "</div></div>";

        return $("<li></li>")
            .data("item.autocomplete", item )
            .append("<a>" + new_string + "</a>")

Now, obviously the function that returns the data for the autosuggest needs to have these new fields in it (companyname, etc), a bit like this:

foreach ($data as $row) {
    $array[] = array(
        "value"       => $row['contactname'],
        "companyname" => $row['companyname'],
        "contactname" => $row['contactname'],
        "contactID"   => $row['contactID']
echo json_encode($array);


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>