View Full Version : Search bar

09-28-2011, 03:30 PM
Good Day:
I am building a small website that lists the local restaurants in the area. I would like to have a search bar at the top of the page so the user could type in the name of the restaurant and it takes you to my review. The way I have it set now, is the user has to scroll down to find the restaurant.
The saerch bar would be much easier.
Thanks in advance for any and all assistance.

09-28-2011, 03:45 PM
the way that I did something similar was to put the names of the businesses into an array and then when the user hits the "search" button, to loop through that array looking for matches, using string.match().

then I guess you would have it set up to scroll the page to an anchor for that listing.

there are lots of errors that can happen during a search (which aren't really errors. it's just that computers are very unintuitive and you have to tell them exactly what you want) - people misspell or put capitals where they shouldn't be. I found it best to change both searched term and business names to lower case and add an autocomplete to the search box. The one that I used is here (http://docs.jquery.com/UI/Autocomplete) and it works well and is simple enough to set up. You also have to account for partial matches and multiple results.

So in the end a simple search is not really so simple :(

If you need more specific advice, maybe we could see your code so far or a link to your page?

09-28-2011, 03:56 PM
Thanks for the quick reply. I appreciate it.
I have not even started the site as of yet. I am just designing it in my head first. I will take a look at what you did as I am not a coder and have no idea where to start.

09-28-2011, 05:15 PM
you're welcome.

that link I gave was just to the autocomplete add-on.

If you'd like to see the search function in action, it's here (http://www.xelawho.com/map/) at the top left of the map - the function is called searchLocations()

It's a little different to what you're talking about because it shows the results on a map (and does some other stuff, too), but the concepts are the same. I added some comments in the code so you can see what's going on.

09-30-2011, 06:52 PM
Your site is awsome!
I really like the navigation on the right hand side that opens and closes on demand.
Will you consider giving me your code on how to do that. I would be gratefull.

09-30-2011, 07:01 PM
hey, thanks.

the sidebar thing is all jquery. It all starts around line 777

but there's tons of jQuery stuff like that around - you should check it out, looks cool and easy to implement.

09-30-2011, 07:41 PM
I looked at source code starting at line 777. I still have no idea how you made it work. I dont see were you load your links etc. Is your htmk linked to a jquery script.
Where do you suggest I look for a similar java script to use on my site.

09-30-2011, 07:51 PM
the code that makes the link in the sidebar is this:

side_bar_html += '<li><a href="javascript:myclick(' + id + ')">' + name + '<\/a><\/li>';

but I understand that's not much use out of context. the variables "id" and "name" get made by pulling info out of a database saved as a separate xml file

if you google "jquery collapsible divs" you should get some relevant results

09-30-2011, 08:01 PM
ok great, Thanks for your help