jquery实现静态搜索功能

在做网站时,有时会有很多的列表内容,长长的一竖排,用户体验不好,所以想仿照微软件的MSDN,在列表最上面提供一个搜索框,这样用户只需要输入相关的关键字符就可以快速检索,显示用户想要的信息。

本文采用Jquery的find和Contains方法来实现不区分大小写的方法搜索,具体步骤如下.

1.建立用户搜索的输入框,这里可以用input type=text来实现,可按需求是否增加一个按钮确定,也可以用Jquery检测text的内容变化来响应搜索。

2.建立一个隐藏的搜索结果标记,用来当用户搜索时显示搜索的结果。

3.所有列表内容。

本文只实现最其本的效,样式用户可按自已的需求进行修改。

效果如下:
jquery实现静态搜索功能

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>jquery实现静态搜索功能</title>
 <script src="js/jquery.min.js"></script>
 <style>
 .navbar-collapse {
 padding: 0;
 }
 .alert {
 margin: 20px;
 }
 .input-group select.form-control:last-child {
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;
 margin-right: -1px;
 }
 .tab-content{
 padding-top: 20px;
 }

 #SearchResult
 {
    background:#eee;
    border:1px solid #333;
    display:none;
 }

 #SearchList > li
 {
    list-style:none;
 }
  #SearchList > li > a
  {
    color:#333;
    text-decoration:none;
  }

  #SearchResult > li
 {
    list-style:none;
 }
  #SearchResult > li > a
  {
    color:#333;
    text-decoration:none;
  }

 </style>
 </head>
 <body>
 <div class="container">
      <form class="navbar-form navbar-right">
      <input type="text" id="searchText" class="form-control" placeholder="搜索内容">
      <button type="button" class="btn btn-default" id="searchBth">搜索</button>
      </form>

  <ul id="SearchResult">
  </ul>
  <ul id="SearchList">
        <li><a href="GetCurrentProcessToken           ">GetCurrentProcessToken            </a></li>
        <li><a href="GetCurrentThread                 ">GetCurrentThread                  </a></li>
        <li><a href="GetCurrentThreadEffectiveToken   ">GetCurrentThreadEffectiveToken    </a></li>
        <li><a href="GetCurrentThreadId               ">GetCurrentThreadId                </a></li>
        <li><a href="GetCurrentThreadStackLimits      ">GetCurrentThreadStackLimits       </a></li>
        <li><a href="GetCurrentThreadToken            ">GetCurrentThreadToken             </a></li>
        <li><a href="GetExitCodeProcess               ">GetExitCodeProcess                </a></li>
        <li><a href="GetExitCodeThread                ">GetExitCodeThread                 </a></li>
        <li><a href="GetPriorityClass                 ">GetPriorityClass                  </a></li>
        <li><a href="GetProcessHandleCount            ">GetProcessHandleCount            </a></li>
        <li><a href="GetProcessId                     ">GetProcessId                     </a></li>
        <li><a href="GetProcessIdOfThread             ">GetProcessIdOfThread             </a></li>
        <li><a href="GetProcessInformation            ">GetProcessInformation            </a></li>
        <li><a href="GetProcessMitigationPolicy       ">GetProcessMitigationPolicy       </a></li>
        <li><a href="GetProcessPriorityBoost          ">GetProcessPriorityBoost          </a></li>
        <li><a href="GetProcessShutdownParameters     ">GetProcessShutdownParameters     </a></li>
        <li><a href="GetProcessTimes                  ">GetProcessTimes                  </a></li>
        <li><a href="GetProcessVersion                ">GetProcessVersion                </a></li>
        <li><a href="GetStartupInfoW                  ">GetStartupInfoW                  </a></li>
        <li><a href="GetSystemTimes                   ">GetSystemTimes                   </a></li>
        <li><a href="GetThreadContext                 ">GetThreadContext                 </a></li>
        <li><a href="GetThreadDescription             ">GetThreadDescription             </a></li>
        <li><a href="GetThreadId                      ">GetThreadId                      </a></li>
        <li><a href="GetThreadIdealProcessorEx        ">GetThreadIdealProcessorEx        </a></li>
        <li><a href="GetThreadInformation             ">GetThreadInformation             </a></li>
        <li><a href="GetThreadIOPendingFlag           ">GetThreadIOPendingFlag           </a></li>
        <li><a href="GetThreadPriority                ">GetThreadPriority                </a></li>
        <li><a href="GetThreadPriorityBoost           ">GetThreadPriorityBoost           </a></li>
        <li><a href="GetThreadTimes                   ">GetThreadTimes                   </a></li>
        <li><a href="InitializeProcThreadAttributeList">InitializeProcThreadAttributeList</a></li>
        <li><a href="IsProcessCritical                ">IsProcessCritical                </a></li>
        <li><a href="IsProcessorFeaturePresent        ">IsProcessorFeaturePresent        </a></li>
        <li><a href="OpenProcess                      ">OpenProcess                      </a></li>
        <li><a href="OpenProcessToken                 ">OpenProcessToken                 </a></li>
        <li><a href="OpenThread                       ">OpenThread                       </a></li>
        <li><a href="OpenThreadToken                  ">OpenThreadToken                  </a></li>
        <li><a href="QueryProcessAffinityUpdateMode   ">QueryProcessAffinityUpdateMode   </a></li>
        <li><a href="QueryProtectedPolicy             ">QueryProtectedPolicy             </a></li>
        <li><a href="QueueUserAPC                     ">QueueUserAPC                     </a></li>
        <li><a href="ResumeThread                     ">ResumeThread                     </a></li>
        <li><a href="SetPriorityClass                 ">SetPriorityClass                 </a></li>
        <li><a href="SetProcessAffinityUpdateMode     ">SetProcessAffinityUpdateMode     </a></li>
        <li><a href="SetProcessInformation            ">SetProcessInformation            </a></li>
        <li><a href="SetProcessMitigationPolicy       ">SetProcessMitigationPolicy       </a></li>
        <li><a href="SetProcessPriorityBoost          ">SetProcessPriorityBoost          </a></li>
        <li><a href="SetProcessShutdownParameters     ">SetProcessShutdownParameters     </a></li>
        <li><a href="SetProtectedPolicy               ">SetProtectedPolicy               </a></li>
  </ul>

 </div>

 <script>
 $('#myTabs a').click(function(e) {
 e.preventDefault()
 $(this).tab('show')
 })

    //start 实现不区分大小写功能,重写操作符
    jQuery.expr[':'].Contains = function(a, i, m){
     return jQuery(a).text().toUpperCase()
       .indexOf(m[3].toUpperCase()) >= 0;
    };  

    // OVERWRITES old selecor
    jQuery.expr[':'].contains = function(a, i, m){
     return jQuery(a).text().toUpperCase()
       .indexOf(m[3].toUpperCase()) >= 0;
    };
  // end

 $('#searchText').change(function() {


 var searchText = $(this).val();
  console.log("searchText:"+searchText);
 var $searchTr = "";
 if(searchText != "") {
  $('#SearchResult').show();
  $('#SearchResult').html("");
  $('#SearchList').hide();
  $searchTr = $('#SearchList li').find('a:contains(' + searchText + ')').parent(); //get li
  console.log($searchTr.length);
  $searchTr.each(function(i, e) {
  $('#SearchResult').append($(e).clone(true));
  });
  //如果没有搜索结果 显示一个报错div
  if($searchTr.length <= 0) {
  $('#SearchResult').html('<div class="alert alert-warning" role="alert">没有内容</div>')
  }
 }else
 {
 $('#SearchResult').html("");
  $('#SearchResult').hide();
  $('#SearchList').show();
 }

 }).keyup(function() {
 $(this).change();
 })
 $('#searchBth').click(function() {
 $('#searchText').change();
 })
 </script>
 </body>
</html>
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!