我有一个用选项卡分隔的单页应用程序,它几乎是来自数据库的链接列表。我想创建一种类型的搜索或过滤器,我不想为此打数据库。据我所知,像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>