[php] Ajax Combobox?

[localzuk]

I'm wanting an input field on a page which has an ajax autocomplete - with the data coming from a database. However, I need it to have a 'value' with it too, so akin to a Combobox.

 

Anyone got any ideas how I'd do this?

 

A workflow example - Sometime types smit into the box and the list of anyone with 'smit' in their name appears in the list, you can then click the one you want, and it is selected and its value is now set in your form.

 

Is there any such thing premade through a framework like JQuery UI or similar? Or am I going to have to construct this myself using a hidden field, and javascript onclicks in a custom div?

[CESIL]

There is an example here, is this what you mean?

 

It should be possible to use a jQuery get to fetch data from an external file and change the option list for the select object.

 

I will try to upload some sample code later when I am back home...

[localzuk]

I want them in the same box (which was kinda the point of 'combo' as it is supposed to combine a list with typed entry - never understood why people call HTML select's comboboxes as they can't do this), without anything pre-populated until they've typed the search sequence.

 

EDIT: Just noticed you can hide the select... This might work, if I can autopopulate the combobox based on the text entry.

Edited April 24, 2013 by localzuk

[localzuk]

Well, I now have my source file which can feed results to the combobox, but I'm at a bit of a loss as to how to fill the select.

 

I'm thinking I would perform my Ajax stuff in the _source function, which is the function which is called by 'autocomplete' on the input box.

 

Just don't know how to get the data - I can get the php to return the data in whatever format I need, be it JSON or plain HTML.

[CESIL]

If you have the source file to deliver the data then if you get that to return comma separated strings then you should be able to use javascript to add the html to the select to update the option elements.

[webman]

I use jQuery UI Autocomplete to do this on a text input field, and update a hidden ID field with the actual value (ID) - the label (name) remains in the text field.

 

Javascript:

 

$(".name").autocomplete({
source: "/ajax/lookup",
minLength: 2,
select: function( event, ui ) {
	$("input[name=id]").val(ui.item.id);
}
});

 

PHP returns:

 

$result = do_search($query);
foreach ($result as $row)
{
   $items[] = array('label' => $row['name'], 'id' => $row['id']);
}

echo json_encode($items);

Edited April 26, 2013 by webman

[localzuk]

That is just a tad easier! I shall have a play shortly.

[localzuk]

Well, that worked instantly. Didn't think it'd be that simple.

[webman]

Well, that worked instantly. Didn't think it'd be that simple.

 

Excellent I like it when things just work!