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.

View Demo

Download Source

EGrappler

Development Resources for Entrepreneurs

jQuery Plugin for On-demand Search Box: SeacrhMeme

SearchMeme Features

Using SearchMeme

SearchMeme Parameters

33 comments

Leave a Reply Cancel reply