Displaying a list of options from database as the user fills in textbox

sheikhmdirfan

Hi All,

Again i am back to u friends...

I have a text box on a webpage in which a user gives a plant name.
What i want is that as the user is typing the plant name a list of options should appear as he is typing and he should be able to select one of those. If he selects one of those then that value should appear in the textbox.

e.g say there are 3 plants whose names start with or contains the word "Boti" in the database. say Boti Mascas, Boti feral, Boti vestras.

As i type Boti or start with B the list should appear with the textbox below it and i should be able to select one among them.

If anyone of you could help in this regard then i will be very thankful.

Thanks in advance..

CoderDan

This is an autocomplete/autosuggest feature.
You will need to use a fair amount of javascript and possibly ajax to pull this off.
If your complete list is less than 100 entries or so, you can skip the ajax, but how it works is:
On page load you use php to write a javascript array of possible entries.
the text input has an onchange function (or, to be more accurate, and browser compatable, I usually use onkeyup) that looks at what has been entered so far, filters the js array down to matching entries (mine usually fires off some ajax to get a filtered list of entries that is used to flesh out the js array with more accurate entries) and the matching entries are what you display in the list (which is presented via js again, and you can do fun stuff like emboldening or changing the colour of the matching part of the string) I usually use a list to display the options with css to position it absolutely in the right location, each list item having onclick js to populate the text input with it's value. that's really it, basically, of course a lot more js to clean up after an item is clicked, etc.