Javascript 如何在Ionic 2中实现jQuery列表过滤器
我有一个jQuery函数,用于从HTML中过滤数据。我从网上找到了这段代码。我需要在Ionic上的应用程序中实现类似的功能。问题是我不知道在list-search-min.js中需要做什么更改 下面是我的index.html代码: 我希望它从以下位置搜索数据:Javascript 如何在Ionic 2中实现jQuery列表过滤器,javascript,jquery,angular,ionic-framework,ionic2,Javascript,Jquery,Angular,Ionic Framework,Ionic2,我有一个jQuery函数,用于从HTML中过滤数据。我从网上找到了这段代码。我需要在Ionic上的应用程序中实现类似的功能。问题是我不知道在list-search-min.js中需要做什么更改 下面是我的index.html代码: 我希望它从以下位置搜索数据: <ion-list> <ion-item> product 1 <ion-item> <ion-item> product 2 <ion-item> <ion-item&g
<ion-list>
<ion-item> product 1 <ion-item>
<ion-item> product 2 <ion-item>
<ion-item> product 3 <ion-item>
...so on
</ion-list>
脚本的实时工作链接-这里是完全定制的 你可以使用任何你想要的元素+你可以根据需要修改你的搜索过滤器 模板侧: 请查看工作演示:
哇太多的代码,你可以简单地在爱奥尼亚做这个与搜索栏,看看哇,我使用离子行和离子列,它会工作还是我需要使用离子列表和离子项目,请让我知道它会与任何你想要的,因为它是一个*ngFor,所以你不能过滤。我没有回答,因为我的答案与我发布的链接相同,但是如果你需要进一步的解释,请提问,我会写一个答案。我从json获取的数据如下-,我们可以聊天吗,我已经用静态数据实现了,只需要从静态数据替换jsin数据进行搜索OK,我已经评论了你的dropbox图像,我们可以在那里聊天。我如何在我的html页面上写这行,感到困惑你必须创建一个你的代码的演示,就像我一样,我想你刚刚开始探索ionic2@user2828442,请你接受并投票表决,因为它给出了你问题的答案。嗨,如果您在这里,那么我们可以继续聊天以结束我的问题吗?
function initializeListSearch(e) {
return void 0 === e || null === e ? void setDefaultValues() : (toggleAnimationSpeed = "undefined" != typeof e.toggleAnimationSpeed ? e.toggleAnimationSpeed : 250, cssActiveClass = "undefined" != typeof e.cssActiveClass ? e.cssActiveClass : "active", itemSelector = "undefined" != typeof e.itemSelector ? e.itemSelector : ".collection-item", openLinkWithEnterKey = "undefined" != typeof e.openLinkWithEnterKey && e.openLinkWithEnterKey, searchTextBoxSelector = "undefined" != typeof e.searchTextBoxSelector ? e.searchTextBoxSelector : "#search-box", void(noItemsFoundSelector = "undefined" != typeof e.noItemsFoundSelector ? e.noItemsFoundSelector : ".no-apps-found"))
}
function setDefaultValues() {
toggleAnimationSpeed = 250, itemSelector = ".collection-item", cssActiveClass = "active", openLinkWithEnterKey = !1, searchTextBoxSelector = "#search-box", noItemsFoundSelector = ".no-apps-found"
}
function searchListItems(e) {
return "" === e ? (resetSearch(), void $(noItemsFoundSelector).hide()) : (foundItems = findItemsInList(e), void(foundItems.length > 0 && openLinkWithEnterKey ? (foundItems[0].addClass(cssActiveClass), $(noItemsFoundSelector).hide()) : $(noItemsFoundSelector).show()))
}
function resetSearch() {
$(itemSelector).slideDown(toggleAnimationSpeed), $(itemSelector).removeClass(cssActiveClass), foundItems = $(itemSelector)
}
function findItemsInList(e) {
for (var t = $(itemSelector), s = [], o = 0; o < t.length; o++) {
var n = t[o];
$(n).removeClass(cssActiveClass), $(n).children("a").html().toLowerCase().indexOf(e.toLowerCase()) < 0 ? $(n).slideUp(toggleAnimationSpeed) : (s.push($(n)), $(n).slideDown(toggleAnimationSpeed))
}
return s
}
function selectNextItem(e) {
if (openLinkWithEnterKey) {
var t = $(itemSelector + "." + cssActiveClass);
if (0 === t.length) "next" === e && $(foundItems[0]).addClass(cssActiveClass), "prev" === e && $(foundItems[foundItems.length - 1]).addClass(cssActiveClass);
else {
var s = $(itemSelector + "." + cssActiveClass);
s.removeClass(cssActiveClass), "next" === e && s.nextAll(itemSelector + ":visible").first().addClass(cssActiveClass), "prev" === e && s.prevAll(itemSelector + ":visible").first().addClass(cssActiveClass)
}
}
}
function openLink() {
if (openLinkWithEnterKey) {
var e = $(itemSelector + "." + cssActiveClass).first().children("a").attr("href");
void 0 === e && null !== e || (document.location.href = e)
}
}
var toggleAnimationSpeed, itemSelector, foundItems, cssActiveClass, openLinkWithEnterKey, searchTextBoxSelector, noItemsFoundSelector;
$(document).ready(function() {
resetSearch(), $(searchTextBoxSelector).bind("input propertychange", function() {
searchListItems($(this).val())
}), $(searchTextBoxSelector).keydown(function(e) {
40 === e.keyCode && selectNextItem("next"), 38 === e.keyCode && selectNextItem("prev"), 13 === e.keyCode && openLink()
})
});
<ion-list>
<ion-item> product 1 <ion-item>
<ion-item> product 2 <ion-item>
<ion-item> product 3 <ion-item>
...so on
</ion-list>
<li class="collection-item">
<a href="">
saurabh
</a>
</li>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [(ngModel)]='searchString'></ion-input>
</ion-item>
</ion-list>
<ion-list *ngFor='let user of ( users|myfilter : searchString)'>
{{ user.name }}
</ion-list>
import {Injectable, Pipe , PipeTransform} from '@angular/core';
@Pipe({ name: 'myfilter' })
export class MyFilterPipe implements PipeTransform {
transform(users: any[], args): any {
return users.filter(user => user.name.toLowerCase().includes(args.toLowerCase()) );
}
}