Question

I have an issue where I am searching on keyupdate on an observable array and sometimes the page freezes. It happens when “indexOf” is inserted in the logic. I just want to hide the objects that are filtered out. It mainly happens when I go under 2 characters. There are 1500 rows. Another thing I noticed this only happens in Chrome, but in IE it works just fine quick!

JS

            var self = this,
                intervalId = null;

            self.powerSchoolCourses = ko.observableArray([]);

            // Stores The Text To Filter The Powerschool Course List
            self.powerSchoolCourseSearchText = ko.observable('');

            self.powerSchoolCourseSearchText.subscribe(function (searchText) {

                if (intervalId)
                    clearTimeout(intervalId);

                intervalId = setTimeout(function () {

                    var powerSchoolCourses = self.powerSchoolCourses();

                    ko.utils.arrayForEach(powerSchoolCourses, function(powerSchoolCourse) {

                        if (searchText.length < 3) {
                            powerSchoolCourse.visible(true);
                        } else if (powerSchoolCourse.courseName.toLowerCase().indexOf(searchText) == -1) {
                            powerSchoolCourse.visible(false);
                        } else {
                            powerSchoolCourse.visible(true);
                        }
                    });

                }, 300);
            });

UI

<div class="filter">
                                    <div class="input-prepend">            
                                        <span class="add-on"><i class="icon-search"></i></span>
                                        <input class="span2" type="text" placeholder="Powerschool Course Name" data-bind="value: powerSchoolCourseSearchText, valueUpdate: 'afterkeydown'" />                                         
                                    </div>
                                </div>

    <!-- ko foreach: powerSchoolCourses -->
                                    <div class="ps-course" data-bind="draggableCourse: {}, css: { 'even-row': $index()%2 }, visible: visible()">
                                        <span class="icon-move"></span>
                                        <span data-bind="html: courseName"></span> (<span data-bind="html: courseNumber"></span>)

                                        <!-- ko foreach: brainHoneyTypesSorted -->
                                        <span class="badge" data-bind="html: $data[0]"></span>
                                        <!-- /ko -->

                                        <a class="icon-plus" data-bind="click: $root.showSections.bind($data), attr: { title: showSections() ? 'Hide Sections' : 'Show Sections' }, css: { 'icon-minus': showSections() }"></a>
                                    </div>

                                    <div class="sections" data-bind="visible: showSections()">
                                        <div class="header">
                                            <!-- ko if: loadingSections() -->
                                            Loading Sections...
                                            <!-- /ko -->
                                            <!-- ko if: !loadingSections() && sections().length == 0 -->
                                            No Sections Found
                                            <!-- /ko -->
                                            <!-- ko if: !loadingSections() && sections().length > 0 -->
                                            Sections
                                            <!-- /ko -->
                                        </div>
                                        <div class="data">
                                            <!-- ko foreach: sections -->
                                            <div class="ps-section" data-bind="css: { 'even-row': $index()%2 }">
                                                <span data-bind="html: schoolName"></span>
                                                <span data-bind="html: teacherLastName"></span>
                                                <span data-bind="html: courseName"></span>
                                                <span data-bind="html: term"></span>
                                                <span data-bind="html: expression"></span>
                                                <span data-bind="html: bhType"></span>
                                            </div>
                                            <!-- /ko -->
                                        </div>
                                    </div>
                                    <!-- /ko -->

Answer 1

I updated the visible: visible() to if: visible(), and the problem is gone.