JQuery Autocomplete - format listing and only return a part to the text box

Question

I'm using the JQuery Autocomplete and it's working just fine. I'm using it to allow someone to search for users out of a database by searching on last name or id number.

Right now the drop down list that is created is the resultes of a SQL query and looks something like:

$row_rst['lName'] . ', ' . $row_rst['fName'] . " - " . $row_rst['user'] . "|" . $row_rst['id']

which outputs something like:

Jones, Henry - hjones
Gibbons, Peter - pgibbons

When I pick Henry the text box gets Jones, Henry - hjones and the hidden field gets his id.

I'd like to format the drop down in columns if possible and only return Jones, Henry to the text box if possible.

Are either of those options possible? I'm thinking it has to do with either formatItem(row) or formatResult(row) but I'm not sure and I can't seem to find how to go about this.

Answer 1

Autocomplete is also available in the latest version of jQuery UI (1.8 for use with jQuery 1.4+) which I think is a bit more up to date than the version you've linked.

If you have a look at the custom data example, at the source, you can see it's making use of the select event. You could do something similar and trim your the stuff you don't want off your string.

e.g something like this (you may have to debug it a bit to find where your values are in the ui object):

 ....
 select: function(event, ui) {
            $('#textBoxIDInHere').val(ui.item.value.substring(0,ui.item.value.indexOf("-", 0)));
            return false;
         }
 ....

As for formatting, if you pick a theme on the jQuery ui download page, the zipped package comes with a .css file. You can preview various presets here, and that autocomplete page has a tab towards the bottom titled Theming that shows you which classes are relevant.

Although this isn't quite the same as the plugin you linked, hopefully it'll at least help you along a bit :)