Question

我有一个由标签分隔的单页应用程序，它几乎是来自数据库的链接列表。我想创建一种搜索或过滤器，我不想为它打中数据库。根据我的理解，像棱角分明的东西可以做到这一点，但我不知道我是多么希望有人可以在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>

Answer 1

所以你的意思是你想用Angular Js创建一个搜索！右

1.从angularjs.org下载angularjs 2.将其链接到您的html文件 3.然后看看这个，Angular过滤器doc：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>

Answer 2

使用类似这样的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(); 
 });

检查这个小提琴here

我怎样才能得到这个＆＃34;搜索栏＆＃34;和jquery一起工作？

2 个答案: