我怎样才能得到这个“搜索栏”与jQuery的工作？

我有一个由标签分隔的页面应用程序，它几乎包含来自数据库的链接列表。我想创建一种搜索或过滤器，我不想为它打数据库。从我的理解来看，像angular这样的东西可以做到这一点，但我不知道我是如何希望有人能够在jQuery中展示我的。这是我到目前为止所尝试的：我怎样才能得到这个“搜索栏”与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>

来源

2015-02-23 user3806832

你想使用jQuery来完成搜索功能......？ – Outlooker 2015-02-23 05:50:13

最好是的，如果可以的话，我会远离服务器端。 – user3806832 2015-02-23 05:55:03

使用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

来源

2015-02-23 06:04:07 Outlooker

它不工作在两个JS小提琴和我的应用程序:( – user3806832 2015-02-23 07:37:25

小提琴的作品对我来说.. – Outlooker 2015-02-23 07:59:57

对不起你是正确的我实施它错了，它几乎完美，只是一件事，当你输入一个搜索词时，它似乎是区分大小写的，有没有什么办法呢？ – user3806832 2015-02-23 08:26:09

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

1.Download从angularjs.org 2.link它angularjs到HTML文件 3.then检查出这一点，角度滤波器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>

来源

2015-02-23 06:02:48

对我来说问题是，即时通讯使用django和我的“朋友”列表来自db – user3806832 2015-02-23 07:44:19

然后从数据库获取数据作为json格式，然后将其传递给角你可以在这里重写django json https：//docs.djangoproject .com/en/1.7 /主题/序列化/ – 2015-02-23 11:58:01

我怎样才能得到这个“搜索栏”与jQuery的工作？

回答

相关问题