我怎样才能得到这个“;搜索栏”;使用jquery

How can I get this "search bar" working with jquery?

本文关键字：搜索栏 jquery 使用      更新时间：2024-03-08

我有一个用选项卡分隔的单页应用程序，它几乎是来自数据库的链接列表。我想创建一种类型的搜索或过滤器，我不想为此打数据库。据我所知，像angular这样的东西可以做到这一点，但我不知道如何做到，所以我希望有人能在jquery中给我看。以下是我迄今为止尝试的内容：

 <html>
   <form method="POST" action="#">{% csrf_token %}

  <div class="row collapse"> 
    <div class="small-9 columns">
      <input type="text" placeholder="Search Song Titles" />
    </div>
    <div class="small-3 columns">
      <button id="hide" type="submit" class="postfix">Search</button>
    </div>
  </div>
  </form>
 {% for v in videos %}
    <div data-which="video_search" data-videotitle="{{search_value}}"(i get this by sending it through the form)>
        {{v}}
    </div>
 {% endfor %}
 <script>
  $(document).ready(function(){
        $("button").click(function(){
        $('[data-which="video_search"]').hide();
        $('[data-videotitle="{{search_value}}"]').show();
                          });});      
        (Javscript for the Tabs -  sort of irrelevant I think, I put it in case its not)
        $(document).foundation({   
        tab: {
        callback : function (tab) {
        console.log(tab);
        }
      }
    });
    </script>

使用jQuery这样的东西可能会帮助你匹配..：）

 $("button").click(function(){
      var searchBox = $("#searchBox").val();  //Gets the value of the searchbox where `searchBox` is the id of the input field
      $('[data-which="video_search"]').hide();
      $('[data-videotitle^="'+searchBox+'"]').show(); 
 });

在这里检查这个小提琴

因此，您的意思是希望使用Angular Js创建一个搜索！！右侧

1.从angularjs.org下载angularjs2.将其链接到您的html文件3.然后看看这个，Angular filter文档：https://docs.angularjs.org/api/ng/filter/filter

简单搜索的示例编码

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                                   {name:'Mary', phone:'800-BIG-MARY'},
                                   {name:'Mike', phone:'555-4321'},
                                   {name:'Adam', phone:'555-5678'},
                                   {name:'Julie', phone:'555-8765'},
                                   {name:'Juliette', phone:'555-5678'}]"></div>
          Search:
          <input ng-model="searchText">
          <table id="searchTextResults">
              <tr>
                  <th>Name</th>
                  <th>Phone</th>
              </tr>
              <tr ng-repeat="friend in friends | filter:searchText">
                  <td>{{friend.name}}</td>
                  <td>{{friend.phone}}</td>
              </tr>
          </table>
          <hr> Any:
          <input ng-model="search.$">
          <br> Name only
          <input ng-model="search.name">
          <br> Phone only
          <input ng-model="search.phone">
          <br> Equality
          <input type="checkbox" ng-model="strict">
          <br>
          <table id="searchObjResults">
              <tr>
                  <th>Name</th>
                  <th>Phone</th>
              </tr>
              <tr ng-repeat="friendObj in friends | filter:search:strict">
                  <td>{{friendObj.name}}</td>
                  <td>{{friendObj.phone}}</td>
              </tr>
          </table>
相关文章：