Question

我有一个包含搜索和排序功能的文档缩略图库。我想将搜索查询应用于过滤器。

我的搜索功能在每个键盘上触发，并按字母顺序过滤。

搜索正在搜索文档标题并显示匹配项。

但结果显示不正确，有很多空行。

我猜这是因为搜索功能会触发可见/不可见，而排序功能会使用show / hide。

Invisible不会从文档模型中删除对象吗？

我的目标是将搜索与过滤器集成，因此结果显示相同。

应该搜索fire updateView（）吗？

这是过滤器脚本，然后是两个搜索脚本，第一个接受输入，第二个接受输入。

 <script>
        $(document).ready(function () {
            //declare a global variable
            var filterVal;
            //check if sessionStorage exists and if so, if there is a var called fillTerm
            //if not, set it to a default value (all)
            if (sessionStorage && sessionStorage.getItem("filTerm")) {
                filterVal = sessionStorage.getItem("filTerm");
            } else {
                filterVal = "all";
                sessionStorage.setItem("filTerm", filterVal);
            }
            //The interaction 
            $(".filter-button").on("click", function () {
                //get the value for our filter
                filterVal = $(this).attr("data-filter");
                //store it in the session storage
                sessionStorage.setItem("filTerm", filterVal);
                //call our view update function
                updateView();
            });

            //this is the function that manipulates the UI
            function updateView() {
                //default situation: all is visible
                if (!filterVal || filterVal === "all") {
                    $('.filter').show('1000');
                }
                    //hide all and show filtered values
                else {
                    $(".filter").hide('3000');
                    $('.filter').filter('.' + filterVal).show('3000');
                }
            };
            //update the view when the page loads
            updateView();
        });
    </script>
    <script>
        //Library Search Box filter results based on query
        function filter(selector, query) {
            query = $.trim(query); //trim white space
            query = query.replace(/ /gi, '|'); //add OR for regex query
            $(selector).each(function () {
                ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
            });
        }
    </script>

    <script>
        //Library Search Box Results Applied as Filter
        $('#searcher').keyup(function (event) {
            //if esc is pressed or nothing is entered
            if (event.keyCode == 27 || $(this).val() == '') {
                //if esc is pressed we want to clear the value of search box
                $(this).val('');
                //we want each row to be visible because if nothing
                //is entered then all rows are matched.
                $('tbody tr').removeClass('visible').show().addClass('visible');
            }

                //if there is text, lets filter
            else {
                filter('tbody tr', $(this).val());
            }

        })

    </script>

这是一个小提琴： https://jsfiddle.net/ewebster/a81v1q46/29/

使用搜索框过滤

0 个答案: