如何在 Ionic 2 中实现 jQuery 列表过滤器答案

【问题标题】：How to implement jQuery list filter in Ionic 2如何在 Ionic 2 中实现 jQuery 列表过滤器
【发布时间】：2018-04-23 15:26:14
【问题描述】：

我有这个 jQuery 函数，用于从 HTML 中过滤数据。我从网上找到了这段代码。我需要在 Ionic 上的应用程序中实现类似的功能。问题是我不知道我需要在list-search-min.js 中做哪些更改。

下面是我的index.html代码：

<!doctype html>
<html>
<head>

    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <link rel="stylesheet" href="app.css">

    </head>

<body>

    <div class="container" style="margin-top:150px;">

        <h1>jQuery list-search Plugin Demo</h1>

        <input id="search-box" type="text" class="validate" autofocus autocomplete="off">

        <ul class="collection">

        <li class="collection-item">
                <a href="">
                    saurabh
                </a>
            </li>


            <li class="collection-item">
                <a href="http://500px.com">
                    500px
                </a>
            </li>
            <li class="collection-item">
                <a href="http://deviantart.com">
                    DeviantArt
                </a>
            </li>
            <li class="collection-item">
                <a href="http://soundcloud.com">
                    SoundCloud
                </a>
            </li>
            <li class="collection-item">
                <a href="http://store.steampowered.com">
                    Steam
                </a>
            </li>
            <li class="collection-item">
                <a href="http://unsplash.com">
                    Unsplash!
                </a>
            </li>
            <li class="collection-item">
                <a href="http://materializecss.com">
                    Materialize
                </a>
            </li>
            <li class="collection-item">
                <a href="https://coolors.co/">
                    Coolers
                </a>
            </li>
            <li class="collection-item">
                <a href="https://www.google.com/fonts">
                    Google Fonts
                </a>
            </li>
            <li class="collection-item">
                <a href="https://nofilmschool.com">
                    No Film School
                </a>
            </li>
            <li class="collection-item">
                <a href="http://videocopilot.net">
                    Video Copilot
                </a>
            </li>
            <li class="collection-item">
                <a href="http://fractalsponge.net">
                    Fractalsponge 3D Art
                </a>
            </li>
            <li class="collection-item">
                <a href="http://wikipedia.org">
                    Wikipedia
                </a>
            </li>
            <li class="collection-item">
                <a href="http://starwars.wikia.com/">
                    Wookiepedia
                </a>
            </li>
            <li class="collection-item">
                <a href="http://jedipedia.wikia.com/">
                    Jedipedia
                </a>
            </li>
            <li class="collection-item">
                <a href="http://oliverschwendener.ch">
                    Oliver Schwendener (Website)
                </a>
            </li>
            <li class="collection-item">
                <a href="http://github.com/oliverschwendener">
                    Oliver Schwendener (GitHub)
                </a>
            </li>
            <li class="collection-item">
                <a href="http://google.com">
                    Google
                </a>
            </li>
            <li class="collection-item">
                <a href="http://youtube.com">
                    YouTube
                </a>
            </li>
        </ul>
        <div class="no-apps-found">
            No Apps Found
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
    <script src="js/list-search-min.js"></script>
    <script>
        initializeListSearch({
            toggleAnimationSpeed: 0,
            openLinkWithEnterKey: true,
            itemSelector: '.collection-item',
            searchTextBoxSelector: '#search-box',
            noItemsFoundSelector: '.no-apps-found'
        });
    </script>
</body>
</html>

还有list-search-min.js代码：

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>

我需要在 list-search-min.js 中进行哪些更改，以便它从 ion-item 而不是从以下位置搜索数据：

<li class="collection-item">
                <a href="">
                    saurabh
                </a>
            </li>

脚本的实时工作链接 - https://www.jqueryscript.net/demo/Easy-jQuery-Client-side-List-Filtering-Plugin-list-search/

【问题讨论】：

哇，这么多代码，你可以在 Ionic 中用 Searchbar 简单地做到这一点，看看ionicframework.com/docs/components/#searchbar
哇，我正在使用 ion-row 和 ion-col ，它可以工作还是我需要使用 ion-list 和 ion-item ，请告诉我
它适用于任何你想要的东西，因为它是*ngFor，所以你不能过滤。我没有回答，因为我的答案与我发布的链接相同，但如果您需要进一步解释，请询问，我会写一个答案。
我正在像这样从 json 中获取数据 - dropbox.com/s/wdj8is1pgbpj6kp/…，我们可以聊聊吗，我已经用静态数据实现了，只需要从我的 jsin 数据中搜索替换静态数据
好的，我评论了你的 Dropbox 图片，我们可以在那里聊天

标签： javascript jquery angular ionic-framework ionic2

【解决方案1】：

这是完全定制的

（您可以使用任何您想要的 Ionic 元素）+（您可以根据需要修改搜索过滤器）

模板方面：

<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()) );
    }
}

请查看工作演示：

https://stackblitz.com/edit/ionic-search-list

【讨论】：

如何在我的 html 页面上写这行 - <ion-row *ngFor = "let list of list"> ，感觉很困惑
你必须为你的代码创建一个演示，像我一样，我想你刚刚开始探索 ionic2
@user2828442，请您接受并投票赞成答案，因为它可以回答您的问题。
hii，如果你在这里，那么我们可以继续聊天以关闭我的问题吗？