注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

自定义实时搜索jQuery 插件HideSeek应用

jQuery插件 fishcity 686浏览

HideSeek的使用非常简单,而实现的功能却非常的强大-实时显示搜索结果,它是基于jQuery的插件应用,兼容 IE7 +、 Chrome、 火狐、 Safari 和 jQuery 1.8.1,1.9.1、 1.11.0、 2.1.0。

HideSeek可实现多种实时搜索结果展示的样式,只需要配置简单的参数。下面来看下如何使用吧。

引入核库文件

 <!-- MODERNIZR -->
  <script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>

  <!-- STYLES -->
  <link href='http://fonts. /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]-->
 <!-- JQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.9.1.min.js"><\/script>')</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 -->

构建html

<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="输入字符试下" 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>

转载请注明:jQ酷 » 自定义实时搜索jQuery 插件HideSeek应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。