next »

[Phaëton]

Ok, I spent yesterday going over 3000 lines of php code (my god, it was full of stars)
and i wanna do something fancy and fun today.  And yes i already tried wearing
my jelly shoes and roach clip earrings while blasting some WHAM! and it just didnt cut it so....

                                             

Really though,  I wanna spice up my forms and do something new .... im making
one of those form fields that automatically suggests things based on what you
are typing.. here is my plan of attack:

  1) Trap the keypress of the form field with client side javascript.
  2) on that event do a (AJAX?) call to a php script that returns a select * from table where
      somefield like '%letterstypedsofar%'  record
  3) populate the dropdown with suggestions with javascript....?

  ----------------------------

  Where do i start reading on this one?  Is Ajax the right way to call for the record from the query?
  How do i draw suggestions in a drop down from a form field.   Sorry I know I could google this but
  maybe a few keywords to send me in the right direction through the serps?

[nutballs]

that sounds about right for the plan. I think that jquery has a plugin for exactly this, though I have no idea where.

if you have a lot of users at once or a very big database, I would start doing the suggest after N characters, and then only update the suggestion every 2 characters. google gives you a suggestion right from the first letter, but thats because they are going from a list of common searches.

[perkiset]

Agree, the plan is the right direction. Couple thoughts:

DO NOT do a %keypress% lookup, the lag time will be too great because the % in the front will negate any index usage. Doing keypress% and having an index on the lookup column will work for you.

AJAX is the right mechanism. Either jQuery's ajax, or any number of libraries including my requestor here on the board will do you quite well. If you choose to try mine, post back here and I'll show you how to use it - it's easy and light. If you're not including jQuery yet then this is a much lighter way of getting started.

If I was doing this, I'd create a JSON array at the server, then eval that into a javascript array client side, then simply replace the elements in the drop down. This is really fast and unchecked, but it'd look something like this:

/* assume that var data contains the JSON text array from the server */
var items = eval('(' + data +')');
var max = items.length;
var target = document.getElementById('theTargetDropdown');

target.items.length = max;
for (var i=0; i<max; i++)
   target.options.text = items;

Hope that spins some gears