jQuery Plugin for On-demand Search Field: SearchMeme
Thanks for coming again to this website. You could have observed [and liked:) ] the brand new structure and shade scheme. That is a part of our contribution in the direction of advocacy of secure and usable net. One other contribution in the direction of simplicity of design is at this time’s freebie which is a free jQuery plugin for the on-demand search field. We name it SearchMeme – the concept is to offer a small search button that may be positioned wherever on the website (you might wish to put it in your website header). Clicking on search button expands it to point out a textual content field the place you possibly can kind your search phrases.
Easy and sensible, is not it? Take a look at this demo yourself.
Contents
SearchMeme Options
- CSS primarily based themes for the search button.
- Adjustable search button course.
- Occasions on search begin and seek finish.
Utilizing SearchMeme
In your HTML file add the subsequent references within the head part.
- Add a reference to newest jQuery script
- Add a reference to searchMeme.js file
- Add a reference to searchMeme.css file
Place a textual content field(enter kind=”textual content”) component wherever in your HTML doc and name the searchMeme initializer perform. Right here is the whole code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero 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 Field: SeacrhMeme</title>
<hyperlink href="css/demo.css" rel="stylesheet" kind="textual content/css" />
<hyperlink href="css/searchMeme.css" rel="stylesheet" kind="textual content/css" />
<script src="js/jquery.min.js" kind="textual content/javascript"></script>
<script src="js/jquery.searchMeme.js" kind="textual content/javascript"></script>
<script kind="textual content/javascript">
$(doc).prepared(perform () {
var search = $('enter').searchMeme();
});
</script>
</head>
<physique>
<enter kind="textual content" />
</physique>
</html>
SearchMeme Parameters
- animationSpeed: Search field sliding velocity, default is 500
- defaultText: Default textual content for the search field, default is ‘Search…’
- Button: CSS theme class ‘orange’ is the default theme. Different themes are ‘Crimson’ and ‘inexperienced.’
- buttonPlacement: ‘left’ or ‘proper’ locations the search button accordingly, default worth is ‘left.’
- onSearch: Customized perform to be known as when search button is pressed
- searchComplete: Worth to point the search is accomplished, see the instance code above to get a concept methods to use this parameter.
Search Meme Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Thanks…
Hello,
This is really great tutorial.
but i have question
how can i modifie to look for class instead of (input type=”text”)
like (input type=”text” class=”searchMeme”)
So it will only work on class=”searchMeme” string.
thank you.
Hi! I’m at work browsing your blog from my new iphone! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the excellent work!
yes, this is really helpful site. i have got many help from this site. thanks all of the member of this site.
Great search box! Thanks for this tutorial
Thanks for the share!
By the way, nice revamp – thumbs up!
Thanks for all the inspirations!