JQuery Autocomplete - print out format and only return part to textbox
I am using JQuery Autocomplete and it works great. I use it to let someone search for users from a database by searching by last name or number.
At the moment, the dropdown list that is being created is the result of an SQL query and looks something like this:
$row_rst['lName'] . ', ' . $row_rst['fName'] . " - " . $row_rst['user'] . "|" . $row_rst['id']
which outputs something like:
Jones, Henry - hjones Gibbons, Peter - pgibbons
When I select Henry, the textbox gets Jones, Henry gets hjones and the hidden field gets its ID.
I would like to format the dropdown in columns if possible and only return Jones, Henry to the textbox if possible.
Are any of these options possible? I think it has to do with formatItem (row) or formatResult (row), but I'm not sure and I can't seem to find how to do this.
a source to share
Autocomplete is also available in the latest jQuery UI (1.8 for use with jQuery 1.4+), which is slightly more up to date in my opinion than the version you linked.
If you look at the custom data example , in the source you can see that it uses an event select
, you could do something like this and trim your stuff that you don't want from your string.
For example, something like this (you might 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;
}
....
In terms of formatting, if you select a theme on the jQuery ui download page, then the zipped package comes with a .css file. You can browse the different presets here , and this autocomplete page has a tab at the bottom called Theming that shows you which classes are relevant.
While this is not exactly the same as the associated plugin, I hope it at least helps you a little :)
a source to share