[web] making a filter search

Started by
4 comments, last by markr 18 years, 7 months ago
Hello, We have a database with about 10,000 school districts in it..and our customers need to search for a school district. What I would like to do is have a listbox or something..with all the communities in it, and a filter textbox above it...then as you enter letters, the box automatically filters down the list. Or maybe I could do what Google Suggest has done. (When you enter a search Query it pops up a bunch of suggested search terms..mine would be the same, except it would be all the school districts..not suggested search terms) I'm unsure of what technologies to use for this though? Can someone give some suggestions, or does anyone know a website that this is done on? I know it will take some &#106avascripting... I was thinking that I could use an XmlHTTPRequest object in &#106avascript to communicate with a server and change the list at runtime..would this be a good idea? Any help at all would be appreciated, and may also make your rating go up ;-) Thanks Alot Everyone, kag1
Advertisement
That could work yes. XmlHttpRequest is what google suggest uses as well. Remember though that you will also need to code the actual list yourself in &#106avascript as the standard HTML widgets won't be good enough.<br><br>Also, be sure to provide some form of regular search interface or directory browse for non JS users or people who have no clue as to what they are searching for.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Thank you very much Sander, my new goal is to make something similar to how the Google Suggest works, with the drop down when you start typing..the problem is..I can't find how they did that. They must use &#106avascript to get that box to drop down like that..but is that just a white picture that gets loaded in you think? then they display the text over top of it...?<br><br>If anyone can give me some hints to that side of it, that would be awesome...I've never really worked with &#106avascript besides the basic form validating and hiding things here and there..<br><br>Thanks a Bunch,<br>kag1
Take a look at CSS. You can create a list like that simply by defining a div and position it beneath the input field. Then, using &#106avascript, everytime the text of the input changes, put in an XmlHttpRequest to the server for a new list (use the OnChange hook on the input field). When you get back the result, you can simply put that list into the div (using DOM scripting or simply through div.innerHTML). Finally, add some fancy &#106avascript to cycle through that list with the arrow keys and you're done.<br><br>I would start off with actually getting a proper list to display and add the arrow key functionality later.<br><br>Ofcourse, checking out the source of google suggest would not be a bad idea either. Just don't copy/paste it (copyright issues and all that).

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Thanks again Sander,

I think i'm nearing completion...i have it load the list into the div using the innerHTML..but the problem is..that it doesn't update the div..until i click on it for some reason?

I tried looking for like an update funtion or something...but no go..there has to be an easy remedy for this?
One possibility is that you're using the "onchange" event. &#106avascript documentation clearly explains that this event does not fire until the object loses the keyboard focus.

You'll have to use a different event if you want to be notified even while it has the focus. You might need to hook this up in a different way on different browsers.

Mark

This topic is closed to new replies.

Advertisement