Step by Step: Custom Search Tool with jQuery

Tutorials Shared by the Internet Community


  Top Tutorials     New Tutorials     Submit     Login     Register  

Step by Step: Custom Search Tool with jQuery

This tutorial is based on an older work of mine that I did couple months ago. Its a relatively simple search function that iterates through a given a
  • Total Hits: 24495

  • Average Rating :
    URL RatingURL RatingURL RatingURL RatingURL Rating


  • Total Votes: 149 votes

  • Category: Java Script/JQuery

  • Submitted on: 2013-05-16 03:35:56

  • Submitted By: Gray Junior Ang

  • Set as Favorite


Data is feed through server, and then translated into JSON – A collection of data items that you wish to display. But to keep the experiment simple, I went back to basic entries using country names instead.
As you search, the script should take your keywords and match or find resemblance of it within the array of country names. E.g. typing “bah” should return you two results – “Bahamas”, “Bahrain”, while typing “baha” should return you one result – “Bahamas”.
But to make this experiment interesting, I’m throwing in jQuery animations and a little styling to make it fancy.    More detail...

Rating Detail

 Stars  Percentage  Total Vote
 One star  Vote LeftVote MiddleVote Right 37.58%  56
 Two starsTwo star  Vote LeftVote MiddleVote Right 10.74%  16
 Three starsThree starsThree stars  Vote LeftVote MiddleVote Right 12.08%  18
 Four starsFour starsFour starsFour stars  Vote LeftVote MiddleVote Right 11.41%  17
 Five starsFive starsFive starsFive starsFive stars  Vote LeftVote MiddleVote Right 28.19%  42

Caste Your Vote

 Rating  Selection  Guidelines
 Poor:     Very disappointing, useless.
 Fair:     Below average, disappointing but not useless.
 Good:     About average in its class.
 Very Good:     Above average for its category.
 Excellent:     One of the best Tutorials in its category.