如何让这个“搜索栏”与jquery一起工作？

Question

I have a one page app that is separated by tabs, its pretty much a list of links coming from a database. 我有一个由标签分隔的单页应用程序，它几乎是来自数据库的链接列表。 I want to create a type of search or filter, I don't want to hit the database for it. 我想创建一种搜索或过滤器，我不想为它打中数据库。 From my understanding, something like angular could do this but I don't know how so I was hoping someone can show me in jquery. 根据我的理解，像棱角分明的东西可以做到这一点，但我不知道我是多么希望有人可以在jquery中向我展示。 Here is what I tried so far: 这是我到目前为止尝试的内容：

 <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

So what you mean is that you want to create a search with Angular Js!! 所以你的意思是你想用Angular Js创建一个搜索！ right 对

1.Download angularjs from angularjs.org 2.link it to your html file 3.then check out this, Angular filter doc : https://docs.angularjs.org/api/ng/filter/filter 1.从angularjs.org下载angularjs 2.将它链接到你的html文件3.然后看看这个，Angular过滤器doc： https ：//docs.angularjs.org/api/ng/filter/filter

Example coding for a simple search 用于简单搜索的示例编码

<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

Using jQuery something like this might help u mate.. :) 使用像这样的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(); 
 });

Check this fiddle here 在这里查看这个小提琴

如何让这个“搜索栏”与jquery一起工作？

问题描述

2 个解决方案

解决方案1
0 2015-02-23 06:02:48

解决方案2
0 已采纳 2015-02-23 06:04:07

如何让这个“搜索栏”与jquery一起工作？

问题描述

2 个解决方案

解决方案1 0 2015-02-23 06:02:48

解决方案2 0 已采纳 2015-02-23 06:04:07

解决方案1
0 2015-02-23 06:02:48

解决方案2
0 已采纳 2015-02-23 06:04:07