Fork me on GitHub
Post Format

jQuery Plugin for On-demand Search Box: SeacrhMeme

Thank you for coming back to this website. You may have noticed [and liked:) ] the new layout and color scheme. This is part of our contribution towards advocacy of simple and usable web. Another contribution towards simplicity of design is today’s freebie which is a free jQuery plugin for on-demand search box. We call it SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website (you may want to put it in your website header). Clicking on search button expands it to show a text box where you can type your search terms.



Simple and smart, isn’t it? Check out this demo yourself.

SearchMeme Features
  • CSS based themes for search button.
  • Adjustable search button direction.
  • Events on search start and search end.
Using SearchMeme

In your HTML file add the following references in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to searchMeme.js file
  • Add a reference to searchMeme.css file

Place a text box(input type=”text”) element anywhere in your HTML document and call the searchMeme initializer function. Here is the complete code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Plugin for On-demand Search Box: SeacrhMeme</title>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/searchMeme.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.searchMeme.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var search = $('input').searchMeme({ onSearch: function (searchText) {
                setTimeout(function () {
                    search.searchMeme({ searchComplete: true });
                    alert('Search completed.');
                }, 3000);
            }
            , buttonPlacement: 'left', button: 'orange'
            });
        });
    </script>
</head>
<body>
    <input type="text" />
</body>
</html>
SearchMeme Parameters
  • animationSpeed: Search box sliding speed, default is 500
  • defaultText: Default text for search box, default is ‘Search…’
  • button: CSS theme class ‘orange’ is the default theme. Other themes are ‘red’ and ‘green’
  • buttonPlacement: ‘left’ or ‘right’ places the search button accordingly, default value is ‘left’
  • onSearch: Custom function to be called when search button is pressed
  • searchComplete: Value to indicate the search is completed, see the example code above to get an idea how to use this parameter.

Related Posts

  1. jQuery Social Media Share and Bookmark Plugin: jsShare
  2. jQuery Broken Link Checker Plugin: jsLink
  3. jQuery Spin Button Plugin: Smart Spin
  4. jQuery Sliding Content Bar Plugin: PushUp Content Bar
  5. jQuery Pagination Plugin: Smart Paginator

55 comments

  1. Pingback: 每个web开发者必备的40个jquery插件 | iluther-专注web技术iluther-专注web技术

  2. Pingback: 转载-30个漂亮的jquery效果欣赏-爱果果 | iluther-专注web技术

  3. Pingback: 25 Fabulous Essential jQuery Plugin ToolKit for Developers | Smashing Spy

  4. Pingback: On-demand Search Box with jQuery Using SeacrhMeme

  5. Pingback: 115 Useful jQuery Form Resources | Pulse2 Technology and Social Media News

  6. Pingback: 25 Essential jQuery Plugin ToolKit for Developers

  7. Pingback: 2012年30个新鲜和杰出的jQuery的效果摘要 | 我们爱网页设计

  8. Pingback: [jQuery] 好用的自定義Slideshow – Rhinoslider | 勇往直前!挨踢星人

  9. Pingback: Best jQuery Plugins for Web DevelopmentPixel2Pixel Design

  10. Pingback: Refreshi Weblog | News and Inspiration » 28 Best jQuery and JS plugins for your website’s presence

  11. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | Pro Design World - Web Design Blog

  12. Pingback: 40个新鲜出炉的 jQuery 插件和免费教程【上篇】 | 编程·早晨

  13. Pingback: Top 35 Essential jQuery Form Plugins and Libraries You'll Actually Need - Medley Web Design Blog

  14. Pingback: 分享10个2012年最新发布的jQuery插件 | 南龙的小站

  15. Pingback: Really Useful Resources and Tools for Designers and Developers | The Wondrous Design Magazine

  16. Pingback: 45 New jQuery Plugins for Web Developers | Splashnology

  17. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | CS5 Design

  18. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | pixelpush design

  19. Pingback: iGuoguo 爱果果酷站 » 14 款基于 jQuery 的实时搜索插件推荐

  20. Pingback: 14 jQuery Live Search Plugins | jQuery4u

  21. Pingback: What’s new for designers, April 2012 | Top website Designing Company in India

  22. Pingback: 40 Best jQuery Plugins Every Web Developer Should Have | MedleyWeb

  23. Pingback: Recently Released jQuery Plugins | Developer Junk

  24. Pingback: Recently Released jQuery Plugins | jQuery4u

  25. Pingback: CSS – JQUERY – SLIDE SHOW – IMAGE EFFECT » “jQuery slide Search Box Plugin”

  26. Pingback: What’s new for designers, April 2012 | Indoor Digital Billboards

  27. Pingback: 40 Recently Released jQuery Plugins

  28. Pingback: 40+ Recently Released jQuery Plugins | Takula

  29. Pingback: Une sélection de 19 PlugIns, CMS ou démo pour les développeurs et concepteurs de sites web

  30. Pingback: 40 Recently Released jQuery Plugins | Typography Blog

  31. Pingback: 40 Recently Released jQuery Plugins | auto

  32. Pingback: What’s new for designers, April 2012 |

  33. Pingback: 40 Recently Released jQuery Plugins | Wordpress Themes

  34. Pingback: 40 Recently Released jQuery Plugins

  35. Pingback: UK Web Design Now! » Post Topic » What’s new for designers, April 2012

  36. Pingback: What’s new for designers, April 2012 | Blue Sparrow Media

  37. Pingback: What’s new for designers, April 2012 | Web Design

  38. Pingback: What’s new for designers, April 2012 « design-iphone-apps

  39. Pingback: What’s new for designers, April 2012 » We Love Brisbane – Website Design

  40. Pingback: | linuxin.ro

  41. Pingback:   SearchMeme – jQuery On-Demand Search Box by Web Factory South Africa

  42. Pingback: jQuery Plugin for On-demand Search Box: SeacrhMeme | TEKNQ

  43. Pingback: 26 New & Awesome Resources For Designers & Developers « CSS Tips

  44. Pingback: 26 New & Awesome Resources For Designers & Developers « The Creative Project

  45. Pingback: Caja de búsqueda en jQuery con SearchMeMe | Referente Web

  46. Pingback: jQuery Plugin for On-demand Search Box: SeacrhMeme | EGrappler | javascript.js | Scoop.it

  47. Pingback: SearchMeme – A jQuery plugin for on-demand search - CodeVisually

  48. Pingback: Novos Plugins jQuery úteis e Tutoriais | Site para Empresas – Blog sobre Internet e Criação de Site

  49. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | StevenCodes

  50. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  51. Pingback: Sacima鲨鳍马工作室 » Blog Archive » All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  52. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | Neil Kearney Design

Leave a Reply

Required fields are marked *.


− five = 4