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

Answer 2

您的代码正在提交表单并回发。将搜索按钮更改为键入＆＃39;按钮＆＃39;例如<button id="searchBtn" class="searchButton" type="button" >search</button>这可以防止默认类型＆＃34;提交＆＃34;。

之后，您只需要调用用于其他按钮的相同代码，然后从$('#searchEntry').val()中提取searchterm。

获取搜索框以过滤结果

2 个答案: