Sign in to follow this  

[web] making a filter search

This topic is 4480 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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 javascripting... I was thinking that I could use an XmlHTTPRequest object in javascript 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

Share this post


Link to post
Share on other sites
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 javascript as the standard HTML widgets won't be good enough.

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.

Share this post


Link to post
Share on other sites
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 javascript 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...?

If anyone can give me some hints to that side of it, that would be awesome...I've never really worked with javascript besides the basic form validating and hiding things here and there..

Thanks a Bunch,
kag1

Share this post


Link to post
Share on other sites
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 javascript, 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 javascript to cycle through that list with the arrow keys and you're done.

I would start off with actually getting a proper list to display and add the arrow key functionality later.

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).

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
One possibility is that you're using the "onchange" event. javascript 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

Share this post


Link to post
Share on other sites

This topic is 4480 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this