How to have a great search tool?

Good day,

If you see this website:
http://www.lakeshorelearning.com/

And write a word in the search box, for instance “ball”, you will see some products beautifully displayed from the same search box, and able to be selected.

Could you please suggest any know library or tool for doing this?

Thanks a lot!!

It can be done using the standard jQuery autocomplete library. All that needs to be done is for your backend server to return more than a simple list, which can then be populated to the screen.

Hi Paul,

It sounds interesting. Could you please give me some guidelines of the steps I should do? I am just starting in jQueries.

Thanks a lot!!

Sure thing - the client-side JavaScript, or in this case the jQuery library, sends the typed in value to the server. The server searches its database for suitable information, and the server sends back some JSON information such as:


{
    "suggestions": ["balls", "sensory balls", "playground balls", "hop along balls", "magnetic balls"],
    "products": [
        {"title": "Ready for Preschool Backpack", "price": "$19.99 - $195.00", "image": "rfsbp.png"},
        {"title": "Get Ready to Write! Gumball Grab", "price": "$29.99", "image": "grtwgg.png"},
        {...} // and so forth
    ]
}

When the web page receives the above information back from the server, it can be interpreted and laid out on the page in whatever manner you desire.

You may be wondering how to get the server to do such magic as in the above JSON response? For that, databases and the PHP forum is an excellent place to obtain some answers from, or .NET depending on your server-management solution.

Hi Paul,

the client-side JavaScript, or in this case the jQuery library, sends the typed in value to the server.

Could you please point me to the right jQuery library I should use for doing this?

Thanks a lot!!

Yes, the standard jQuery autocomplete library is a good one to use.

Hi Paul,

I will be checking this library.
I also found this information about JSON: http://www.techrecite.com/how-to-create-json-using-data-from-mysql-database/

Thanks a lot for your help. I have lots of research to do now!!