Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Search bar

  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Search bar

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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 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?

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.
    Thanks

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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 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.

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.
    Shepard

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi.
    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.
    Thanks

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    the code that makes the link in the sidebar is this:

    Code:
    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

  • #9
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ok great, Thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •