Autocomplete field in form

[clang]

I'm not sure how to explain this well. So if I suck at it, let me know and I'll try to elaborate.

 

I have a php form. One of the fields right now is a drop down box. That drop down box gets it's content from a MySQL table. Currently it's just a few options in the box, but it has the potential to become a lot. So many infact, that them all being in a drop down box would become cumbersome.

I would like to change this field so that instead of a drop down box, it is instead an auto complete search box. Similar to google's search box I guess. You start typing in the first few letters of the name you would like to enter into the form, and it starts showing you options you can select that will fill in that section of the form.

Once you select the one you want, that information is passed to the php function, in the same way it would have if it was a drop box or a select box. Meaning, what the user selected isn't necessarily what is considered the selection. Example, you have a check box with the label of "This is one", but when you check that box and submit the form the value of your selection is simple 1.

 

In code

<option value="1">This is one</option>

After that, I've already got the working code to take it from the form and put it in the MySQL database.

 

The only other thing that is a hang up, is that each user, has the potential to see different items in that search box.

Lets say user1 can has access to 1, 2, 3 while user2 has access to 2,4,5. The list of things they have access to will be in the MySQL database, and I should be able to return them in any way needed. But basically the dictionary which the auto complete uses must be dynamic.

 

I know this was wordy and maybe too confusing, but if anyone has some suggestions and help for me I would really appreciate it.

[corbin]

That sounds like a job for AJAX.... I think barand has an example/tutorial in his signature...

 

A quick google search came up with:

 

http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html

[kratsg]

Well, try and follow me on this. "AJAX pwns" for this example, actually.

 

Here's the "english" version of proceeding.

 

Take a code like this:

 

<input type=text onkeyup=runfunction(this.value);>

 

The runfunction would be an AJAX request to a PHP file that will search the database using a query (using the LIKE value% part) and return results as an html list. Then you would use CSS for positioning the div and changing the html list into proper content.

[clang]

Thanks corbin I'll read through that link.

I figured I would need ajax, but I've not used it at all, ever. So it's a totally new collection of languages for me. I understand an extremely minimal amount of java script. Basically enough to read through it, but get totally lost without a bunch of comments.

Are you guys of the opinion that this won't be too difficult to implement?

[corbin]

http://members.aol.com/barryaandrew/xmlhttp/article.html

 

There's barands tutorial... Took me a sec to find ;p.

 

I was slightly confused by AJAX at first, but once you get the general idea of what's going on, it's quite simple.

 

Then again, I knew JS x.x.

[kratsg]

All AJAX really is, is a 'user' accessing a url with certain variables. You have one method for post variables, one method for get variables, and what it does is send your request to the php page, wait for a response, then you handle that response in javascript.

[clang]

Corbin, I really like the link you gave me. It details the steps involved very nicely. But I have a question. Is it not excessive for us to do a query to the server with every letter which is entered? It seems like you could do one query, then take those results and eliminate the ones which do not match. Or am I trying to make this more complicated then it needs to be?

[kratsg]

I can understand what you're getting at. All about server load and speed.

 

However, if you query a separate database that is reserved just for the list, you'll be fine. Or, here's an even better option.

 

Use a computer to manually compile a .txt file that contains line by line, all the words that can be searched, and use an fopen/fgets (array) in order to get that list.

[corbin]

Corbin, I really like the link you gave me. It details the steps involved very nicely. But I have a question. Is it not excessive for us to do a query to the server with every letter which is entered? It seems like you could do one query, then take those results and eliminate the ones which do not match. Or am I trying to make this more complicated then it needs to be?

 

That would work, but you would have to send the entire DB to the client side and then weed it out there....  If you didn't do it that way, then PHP would have to repull the entire DB every time the client typed something, which would of course take more processing, bandwidth -- basically just effort over all, than the LIKE method.

[clang]

I'm having some problems testing barandar's example. I've downloaded all the files, added the correct information to my database, updated the configuration file so that it can connect to the database, and even adjusted my php.ini to allow mysql tags (as apposed to mysqli which I use.) I don't get an error anywhere, but nothing happens. If I go directly to the .php script in the url and include a tag to search for I get results, so I know the scripts are talking with the server correctly. And if I try something crude like including a "Hello world" at the beginning of the functions, I get hello world. But it's not all working together. Any ideas? I'm thinking maybe the way it's passing the url is what's messing it up. Would some one mind explaining to me what xmlhttp.open("GET", url, true); does?

 

Edit: I've changed my mind. It's talking to the .php script file just file. When I put the same hello world alert at the beginning of that script, and type in a letter, I get the alert as expected. So I'm not sure what's going on. It's just not talking to the html file correctly I guess. Suggestions?

[clang]

Sorry to double post but I can't seem to edit my previous one.

 

I take back the thing I just took back. I thought I could see the alert from my php script, but I can't get it to happen again, so I might be mistaken. I'm back to thinking it might be the url which is passed.