Usage example


John Doe

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Ricardo Bochini

Football, Futbol, Independiente, Argentina Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Lionel Messi

Balon de oro, Barcelona, Rosario, Argentina Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Manu Ginobilli

Spurs, Bahia Blanca, Argentina Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Roger Federer

Tennis, ATP, Wimbledon, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Jon "Bones" Jones

UFC, MMA, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Rich Franklin

UFC, MMA, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Anderson Silva

UFC, MMA, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Rafael Nadal

Tennis, Roland Garros, ATP, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Sergio Kun Aguero

Manchester City, Independiente, Argentina of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Usain Bolt

Jamaica, Gold medal, 100mts, is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Asafa Powel

Jamaica, Gold medal, 100mts, is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Fabricio Werdum

UFC, MMA Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Wanderley Silva

UFC, MMA, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Rashad Evans

UFC, MMA, the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s


Source code

 

HTML Markup

First, define the input text box, you can do something like this:

          <input type="text" placeholder="search your athlete" id="criteria" />

Once you created the input text, you should create (manually or though PHP/Ruby/etc) the HTML elements. All these elements should have a class assigned, so that they can be selectable by the plugin. In this case we'll assign the default classname used in the plugin "simplesearch". In case you don't want to assign this class name you can customize the classname for the plugin selector. You can read how to set these values later.

          <script type="text/javascript" src="js/plugins/simple-search/simplesearch.min.js"></script>
          ...
          <div class="simplesearch">
            //your content here
          </div>

I've included the minified version of the plug-in. If you want to see the original (unpacked) version click here

Javascript code

This is the default setup for the simplesearch plugin.

          $(document).ready(function(){
             $('#criteria').simplesearch();
          });

In case you want to customize the default values you can indicate through these parameters. All these parameters are optional.

          $(document).ready(function(){
             $('#criteria').simplesearch({
                selector: 'your_selector_class',    // you can use div.my_class, or any nested selector supported by jQuery
                emptyMsg: 'your not found message', // default value already defined in the plugin
                emptyMsgHolder: 'Your DOM Element for not found message', // already defined in the plugnin.
             });
          });

Download

 

Using Github

Awesome! this is the best way to download a plug-in. Clone this repository and follow all the upgrades and new plug-ins that will be added soon.

        git clone https://github.com/aboyon/jQuery-plugins.git

Download the ZIP file

If you're not familiar usign console commands or using GitHub, you can click in this link and download this file in a zip format.


About this document & the author

Not too much to say about these things. Just a few comments.
About this document, please if you find a grammar/translation error or a technical mistake, please let me know writing an email to contact@davidsilveira.me. You can use, improve, and distribute this plug-in as you wish. Use under licence GPL3 About me, you already know my name, David Silveira, I'm from Argentina. I'm always looking for new job opportunities.