以下是 jQuery自定义实时搜索插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery自定义实时搜索插件</title>
<!-- MODERNIZR -->
<script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>
<!-- STYLES -->
<!--<link href='#fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" type="text/css" href="stylesheets/reset.css">
<link rel="stylesheet" type="text/css" href="stylesheets/typography.css">
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="stylesheets/github.css">
<!--[if lt IE 9]>
<script src="#html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
<img src="images/hideseek_logo.png" class="screenshot">
<div id="wrapper">
<!-- HEADER -->
<div id="header_wrapper">
</div>
<!-- HEADER ends -->
<!-- MAIN CONTAINER -->
<div id="body_wrapper">
<!-- <h3>About</h3> -->
<h3>Demonstration</h3>
<!-- CONTENT -->
<section>
<!-- CONTENT BLOCK -->
<article>
<div class="column">
<h2>Default usage</h2>
<pre data-language="javascript">
$('#search-1').hideseek();
</pre>
</div>
<div class="column">
<label for="search">Programming Language Popularity</label>
<input id="search" name="search" placeholder="Start typing here" type="text" data-list=".default_list" autocomplete="off">
<ul class="vertical default_list">
<li>C</li>
<li>Java</li>
<li>PHP</li>
<li>JavaScript</li>
<li>C++</li>
<li>Python</li>
<li>Shell</li>
<li>Ruby</li>
<li>Objective C</li>
<li>C#</li>
</ul>
</div>
<div class="clear"></div>
</article>
<article id="highlight">
<div class="column">
<h2>Highlight</h2>
<pre data-language="javascript">
$('#search-highlight').hideseek({
highlight: true
});
</pre>
</div>
<div class="column">
<label for="search-highlight">Browser Statistics and Trends</label>
<input id="search-highlight" name="search-highlight" placeholder="Start typing here" type="text" data-list=".highlight_list" autocomplete="off">
<ul class="vertical highlight_list">
<li>Chrome</li>
<li>Firefox</li>
<li>Internet Explorer</li>
<li>Safari</li>
<li>Opera</li>
</ul>
</div>
<div class="clear"></div>
</article>
<article id="nodata">
<div class="column">
<h2>No results message</h2>
<pre data-language="javascript">
$('#search-nodata').hideseek({
nodata: 'No results found'
});
</pre>
</div>
<div class="column">
<label for="search-nodata">Top Greatest Movies of All Time</label>
<input id="search-nodata" name="search-nodata" placeholder="Start typing here" type="text" data-list=".nodata_list" autocomplete="off">
<ul class="vertical nodata_list">
<li>The Godfather</li>
<li>Schindler's List</li>
<li>Raging Bull</li>
<li>The Shawshank Redemption</li>
<li>Casablanca</li>
<li>One Flew Over the Cuckoo's Nest</li>
<li>Gone with the Wind</li>
<li>Citizen Kane</li>
</ul>
</div>
<div class="clear"></div>
</article>
<!-- CONTENT BLOCK -->
<article id="navigation">
<div class="column">
<h2>Navigation</h2>
<pre data-language="javascript">
$('#search-navigation').hideseek({
nodata: 'No results found',
navigation: true
});
</pre>
</div>
<div class="column">
<label for="search">Top 10 Most Popular Frameworks</label>
<input id="search-navigation" name="search" placeholder="Start typing here" type="text" data-list=".navigation_list" data-nodata="No results found" autocomplete="off">
<ul class="vertical navigation_list">
<li><a href="#www.asp.net/">ASP.NET</a></li>
<li><a href="#flask.pocoo.org/">Flask</a></li>
<li><a href="#codeigniter.com/">CodeIgniter</a></li>
<li><a href="#framework.zend.com/">Zend</a></li>
<li><a href="#rubyonrails.org/">Ruby on Rails</a></li>
<li><a href="#angularjs.org/">AngularJS</a></li>
<li><a href="#www.djangoproject.com/">Django</a></li>
<li><a href="#www.yiiframework.com/">Yii</a></li>
<li><a href="#symfony.com/">Symfony</a></li>
<li><a href="#cakephp.org/">CakePHP</a></li>
</ul>
</div>
<div class="clear"></div>
</article>
</section>
<h3 id="custom_event">Custom Events</h3>
<section>
<!-- CONTENT BLOCK -->
<article>
<div class="column">
<h2>Custom event "_after"</h2>
<pre data-language="javascript">
$('.after_event').hideseek();
$('.after_event').on("_after", function() {
alert('This alert comes after the search is finished!')
});
</pre>
</div>
<div class="column">
<label for="search">Top 10 Countries That Offer Mail-Order Brides</label>
<input id="search-custom-event" name="search" placeholder="Start typing here" type="text" data-list=".custom_event_list" data-nodata="No results found" autocomplete="off">
<ul class="vertical custom_event_list">
<li>Russia</li>
<li>The Philippines</li>
<li>Colombia</li>
<li>Dominican Republic</li>
<li>Ukraine</li>
<li>Thailand</li>
<li>India</li>
<li>China</li>
<li>Brazil</li>
<li>Vietnam</li>
</ul>
</div>
<div class="clear"></div>
</article>
<article>
<div class="column">
<h2>Custom event "_after_each"</h2>
<pre data-language="javascript">
$('.after_each_event').hideseek();
$('.after_each_event').on("_after_each", function() {
alert('This alert comes after the procession of each element!')
});
</pre>
</div>
<div class="column">
<label for="search">Top 10 Crazy Structures Made With Legos</label>
<input id="search-custom-event-2" name="search" placeholder="Start typing here" type="text" data-list=".custom_event_2_list" data-nodata="No results found" autocomplete="off">
<ul class="vertical custom_event_2_list">
<li>House made from Lego’s</li>
<li>Gigantic Aircraft Carrier model</li>
<li>Enormous replica of A380 Airbus</li>
</ul>
</div>
<div class="clear"></div>
</article>
</section>
<!-- CONTENT ends-->
<h3>Use of data attribute to load</h3>
<section>
<!-- CONTENT BLOCK -->
<article id="attribute">
<div class="column">
<h2>The attribute "data-toggle"</h2>
<pre data-language="javascript">
<input data-toggle="hideseek">
</pre>
</div>
<div class="column">
<label for="search">Top 10 Front-End Development Frameworks</label>
<input id="search" name="search" placeholder="Start typing here" type="text" data-toggle="hideseek" data-list=".default_list_data" data-nodata="No results found" autocomplete="off">
<ul class="vertical default_list_data">
<li>Bootstrap</li>
<li>Fbootstrapp</li>
<li>BootMetro</li>
<li>Kickstrap</li>
<li>Foundation</li>
<li>GroundworkCSS</li>
<li>Gumby</li>
<li>HTML KickStart</li>
<li>IVORY</li>
<li>Kube</li>
</ul>
</div>
<div class="clear"></div>
</article>
</section>
</div>
<!-- MAIN CONTAINER ends -->
</div>
<!-- JQuery -->
<script src="javascripts/vendor/jquery-1.9.1.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="javascripts/vendor/waypoints.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/waypoints-sticky.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/jquery.hideseek.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/rainbow-custom.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/jquery.anchor.js"></script>
<script src="javascripts/initializers.js"></script>
<!-- JS ends -->
</body>
</html>
JS代码(initializers.js):
// Run javascript after DOM is initialized$(document).ready(function(){
$('#body').waypoint('sticky');
$('#search').hideseek();
$('#search-highlight').hideseek({
highlight:true}
);
$('#search-nodata').hideseek({
nodata:'No results found'}
);
$('#search-navigation').hideseek({
nodata:'No results found',navigation:true}
);
$('#search-custom-event').hideseek();
$('#search-custom-event').on("_after",function(){
alert('This alert comes after the search!')}
);
$('#search-custom-event-2').hideseek();
$('#search-custom-event-2').on("_after",function(){
alert('This alert comes after the procession of each element!')}
);
}
);
CSS代码(styles.css):
/** * BlankPlate | Yet another HTML5 Starter Kit * * BlankPlate Main stylesheet * * @copyrightCopyright 2012,Dimitris Krestos * @licenseApache License,Version 2.0 (http://www.opensource.org/licenses/apache2.0.php) * @linkhttp://vdw.staytuned.gr/html5-starter-kit-blankplate/ * @packageBlankPlate * @versionv1.2.3 */
/** * WORLD * * ------------------------------------------------------------------------------------------------- */
BODY{font-size:13px;/* Override typography */
font-family:"Open Sans",helvetica,arial,sans-serif;}
#wrapper{/*margin:0 auto;*/
/*max-width:960px;*/
width:100%;}
H2{font-weight:300;}
UL,LI{color:#c6c6c6;font-size:15px;line-height:24px !important;}
LI A{color:inherit;}
INPUT[type="text"]{background:#F1F1F1;border:0;border-bottom:1px solid #c6c6c6;margin-bottom:10px;padding:10px 0 10px 10px;width:100%;}
/* Clear fix */
.clear{clear:both;float:none;font-size:1px;height:0px;line-height:0}
/** * HEADER * Your header rules * ------------------------------------------------------------------------------------------------- */
.top_bar{background:white;border-bottom:1px solid #E5E5E5;color:#888;font-size:16px;font-weight:700;text-align:center;text-transform:uppercase;line-height:80px;letter-spacing:2px;width:100%;}
#header_wrapper{background:#3A3E3D;width:100%;}
HEADER{color:white;height:400px;margin:0 auto;max-width:940px;}
HEADER H1{color:inherit;font-size:48px;letter-spacing:4px;line-height:78px;padding-top:120px;text-transform:uppercase;}
HEADER H2{color:inherit;font-size:18px;letter-spacing:5px;text-transform:uppercase;}
/** * BODY * Your content rules * ------------------------------------------------------------------------------------------------- */
#body_wrapper{background:white;width:100%;}
#body_wrapper H3{background:white;border-bottom:1px solid #E5E5E5;color:#888;font-size:16px;text-align:center;text-transform:uppercase;line-height:80px;letter-spacing:2px;width:100%;}
SECTION#body{background:#f5a732;}
SECTION#body H2{color:white;font-size:18px;font-weight:300;letter-spacing:1px;line-height:34px;}
SECTION{background:#F1F1F1;/*margin-top:80px;*/
width:100%;}
.stuck{position:fixed;top:0;}
ARTICLE{margin:0 auto;padding:30px 0 20px;max-width:940px;}
ARTICLE UL{list-style:none;}
ARTICLE H2{color:#E95855;margin-bottom:10px;}
ARTICLE LABEL{background:#F5A732;color:white;display:block;font-size:16px;font-weight:100;line-height:20px;padding:10px 0 10px 10px;width:100%;}
PRE{width:400px;}
/** * FOOTER * * ------------------------------------------------------------------------------------------------- */
FOOTER{width:100%}
.footer_wrapper{color:#888;margin:20px auto;width:940px;}
/** * SEARCH * * ------------------------------------------------------------------------------------------------- */
.column{float:left;width:50%;}
.button{background:#f5a732;border-bottom:4px solid #cd8722;color:#FFFFFF;display:block;float:left;font-size:14px;letter-spacing:2px;margin-top:20px;margin-right:26px;padding:15px 20px;text-align:center;text-transform:uppercase;width:150px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.button:hover{background:#f4ac40;color:#FFF;text-decoration:none;}
.link{color:white;display:block;float:left;font-size:14px;font-weight:300;letter-spacing:1px;line-height:48px;margin-top:20px;text-decoration:none;}
.link:hover{text-decoration:underline;}
.anchorLink{border-bottom:1px dashed white;}
.anchorLink:hover{text-decoration:none;}
.screenshot{position:absolute;clip:rect(0 0 0 0);}
.selected{background:white;padding:2px 8px;}
.logo{margin-top:-6px;margin-right:10px;vertical-align:middle;}
分享到QQ
分享到微博
微信扫一扫
