获取搜索框以过滤结果

Question

我有一个过滤器按钮列表,用于过滤图库项目.过滤效果很好,过滤器状态保存在会话存储中.我正在尝试链接搜索框和按钮.

我试图实现的行为是当有人键入搜索框然后点击进入或点击搜索按钮时,他们的条目将传递给过滤器功能并显示匹配结果.

我无法获取字符串并将其分配给变量.我无法让过滤器处理该变量.

我做了一个小提琴演示:https: //jsfiddle.net/ewebster/Lxveeq65/22/

JS:

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

        //now let's attach some interaction to our buttons
        $(".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);
            console.log(sessionStorage);
            console.log(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();
            }
                //hide all and show filtered values
            else {
                $(".filter").hide();
                $('.filter').filter('.' + filterVal).show();

                console.log("searchTerm");
                console.log("filterVal");
            }
        };
        //update the view when the page loads
        updateView();

        $(".searchButton").click(function () {
        var term = $(this).attr('data-filter');
        var searchTerm = document.getElementById("searchEntry").value;

        console.log("searchTerm");
        console.log("filterTerm");
    })

    });

最后的searchButton函数是不起作用的.我意识到按钮可以在点击时触发功能,或者该功能可以监听按钮的id上的点击.在任何情况下,我都无法获取搜索输入.

表格可能需要方法POST,取决于我问的地方.

Answer 1

单击该按钮时，将提交表单并重新加载页面。如果您可以在本地渲染所有内容，则无需使用表单。

我已经更新了小提琴以删除表单，并添加了一个新的单击处理程序。您可以添加另一个事件侦听器来处理 Enter 键并执行相同的操作。

我无法从您的问题确定您是否需要发布表格。在我看来，只是在寻找客户端，因此我的回答放弃了表格。

https://jsfiddle.net/Lxveeq65/39/

        $("#searchBtn").on("click",function(){
            filterVal = $('#searchEntry').val();
            sessionStorage.setItem("filTerm", filterVal);
            updateView();
        });

        $("#searchEntry").on("keypress",function(e){
                if (e.keyCode == 13) {
              filterVal = $('#searchEntry').val();
              sessionStorage.setItem("filTerm", filterVal);
              updateView();
            }
        });