我怎樣才能得到這個「搜索欄」與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的工作？

回答

相關問題