comindware.core.ui/demo/app/cases/list/listSearchHighlight.js

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

import ListSearchCanvasView from 'demoPage/views/ListSearchCanvasView';

// Most of this steps came from 'Basic Usage' example.
// New steps required for search & highlight marked with 'NEW'

export default function() {
    // 1. Create Backbone.Model that implement ListItemBehavior
    const ListItemModel = Backbone.Model.extend({});

    // 2. Create VirtualCollection that use this model (and do other stuff maybe)
    // [NEW] apply HighlightableBehavior on it
    const ListItemCollection = Core.collections.VirtualCollection.extend({
        model: ListItemModel
    });

    // 3. Get some data (inline or by collection.fetch)
    const collection = new ListItemCollection(undefined, { isSliding: true });
    collection.reset(
        _.times(1000, i => ({
            id: i + 1,
            title: `My Task ${i + 1}`
        }))
    );

    // 4. Create child view that display list rows.
    // - you MUST implement ListItemViewBehavior
    // - [NEW] you MUST implement onHighlighted/onUnhighlighted methods to support text highlighting while searching
    const ListView = Marionette.View.extend({
        template: Handlebars.compile('<div class="dd-list__i"><span class="js-title">{{title}}</span></div>'),

        ui: {
            title: '.js-title'
        },

        behaviors: [Core.list.views.behaviors.ListItemViewBehavior],

        // It's your responsibility to visualize text highlight
        onHighlighted(fragment) {
            const text = Core.utils.htmlHelpers.highlightText(this.model.get('title'), fragment);
            this.ui.title.html(text);
        },
        onUnhighlighted() {
            this.ui.title.text(this.model.get('title'));
        }
    });

    // 5. [NEW] Create searchbar view (or whatever you want to change filter function) and implement search
    const searchBarView = new Core.views.SearchBarView();
    searchBarView.on('search', text => {
        if (!text) {
            collection.filter(null);
            collection.unhighlight();
        } else {
            text = text.toLowerCase();
            collection.unhighlight();
            collection.filter(model => Boolean((model.get('title') || '').toLowerCase().indexOf(text) !== -1));
            collection.highlight(text);
        }
    });

    // 6. At last, create list view bundle (ListView and ScrollbarView)
    const listView = Core.list.GridView({
        collection, // Take a note that in simple scenario you can pass in
        // a regular Backbone.Collection or even plain javascript array
        childView: ListView,
        childHeight: 34
    });

    // 7. Show created views in corresponding regions
    return new ListSearchCanvasView({
        search: searchBarView,
        content: listView
    });
}