以下是 可定制的实时搜索JQUERY插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>可定制的实时搜索JQUERY插件</title>
<meta name="description" content="A simple, yet customizable live search jQuery plugin">
<!-- MODERNIZR -->
<script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>
<!-- STYLES -->
<link href='http://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="http://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">
<header>
<h1><img src="images/hideseek_logo.png" class="logo">HideSeek</h1>
<h2>A simple, yet customizable live search jQuery plugin</h2>
</header>
</div>
<!-- HEADER ends -->
<!-- MAIN CONTAINER -->
<div id="body_wrapper">
<!-- <h3>About</h3> -->
<section id="body" role="main">
<article>
<h2> HideSeek is simple, yet customizable jQuery plugin for live search, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0. and
supports <a class="anchorLink" href="#highlight">highlighting</a>, <a class="anchorLink" href="#nodata">custom message</a>, <a class="anchorLink" href="#navigation">navigation</a>, <a class="anchorLink" href="#attribute">initialization via data attribute</a> and <a class="anchorLink" href="#custom_event">custom events</a>.</h2>
</article>
</section>
<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="http://www.asp.net/">ASP.NET</a></li>
<li><a href="http://flask.pocoo.org/">Flask</a></li>
<li><a href="http://codeigniter.com/">CodeIgniter</a></li>
<li><a href="http://framework.zend.com/">Zend</a></li>
<li><a href="http://rubyonrails.org/">Ruby on Rails</a></li>
<li><a href="http://angularjs.org/">AngularJS</a></li>
<li><a href="http://www.djangoproject.com/">Django</a></li>
<li><a href="http://www.yiiframework.com/">Yii</a></li>
<li><a href="http://symfony.com/">Symfony</a></li>
<li><a href="http://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!')}
);
}
);
/* �������������֮�� www.lanrenzhijia.com */
CSS代码(github.css):
/** * GitHub theme * * @author Craig Campbell * @version 1.0.4 */
/* �������������֮�� www.lanrenzhijia.com */
pre{border:1px solid #ccc;word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px;}
code{border:1px solid #eaeaea;margin:0px 2px;padding:0px 5px;font-size:12px;}
pre code{border:0px;padding:0px;margin:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
pre,code{font-family:Consolas,'Liberation Mono',Courier,monospace;color:#333;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
pre,pre code{font-size:13px;}
pre .comment{color:#998;}
pre .support{color:#0086B3;}
pre .tag,pre .tag-name{color:navy;}
pre .keyword,pre .css-property,pre .vendor-prefix,pre .sass,pre .class,pre .id,pre .css-value,pre .entity.function,pre .storage.function{font-weight:bold;}
pre .css-property,pre .css-value,pre .vendor-prefix,pre .support.namespace{color:#333;}
pre .constant.numeric,pre .keyword.unit,pre .hex-color{font-weight:normal;color:#099;}
pre .entity.class{color:#458;}
pre .entity.id,pre .entity.function{color:#900;}
pre .attribute,pre .variable{color:teal;}
pre .string,pre .support.value{font-weight:normal;color:#d14;}
pre .regexp{color:#009926;}
/* �������������֮�� www.lanrenzhijia.com */
CSS代码(inputs.css):
/** * BlankPlate | Yet another HTML5 Starter Kit * * BlankPlate Inputs stylesheet * * Normally you don't have to make any changes in this file. * Your changes should be placed in styles.css file. * * @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.3.2 */
/** * INPUTS * Basic rules for inputs,textareas and selects * ------------------------------------------------------------------------------------------------- */
INPUT,TEXTAREA,SELECT{background-color:#FFF;border:1px solid #CCC;border-radius:3px;display:inline-block;font-family:'Open Sans',sans-serif;font-size:13px;margin-bottom:10px}
INPUT[type="radio"]{cursor:pointer}
SELECT,INPUT[type="file"]{height:2.154em !important;padding:0.308em !important}
INPUT[type="text"],INPUT[type="email"],INPUT[type="password"],TEXTAREA,LABEL{padding:0.308em}
INPUT:focus,TEXTAREA:focus{border-color:#C6C6C6;box-shadow:0 1px 1px rgba(0,0,0,0.2);outline:0 none}
INPUT,TEXTAREA{-webkit-transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;/* Saf3.2+,Chrome */
-moz-transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;/* FF4+ */
-ms-transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;/* IE10? */
-o-transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;/* Opera 10.5+ */
transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;}
SELECT{background-color:#FFF}
OPTION{padding:0 0.615em}
LABEL{display:block;line-height:1.385em}
LABEL.inline{display:inline-block;line-height:1.385em;margin-bottom:0.769em}
分享到QQ
分享到微博
微信扫一扫
