获取搜索框以过滤结果

我有一个筛选图库项目的筛选器按钮列表。 过滤效果很好，过滤器状态保存在会话存储中。 我试图将搜索框和按钮链接起来。

我试图达到的行为是当某人键入搜索框然后点击输入或点击搜索按钮时，他们的条目被传递给过滤器函数并显示匹配结果。

我无法获取字符串并将其分配给一个变量。 我无法让过滤器在该变量上工作。

我做了一个小提琴演示：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，取决于我问的地方。

---

当你点击按钮时，表单被提交并且页面重新加载。 如果您可以在本地渲染它，则无需使用表格。

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

我无法从您的问题中确定您是否要求将表单发送。 在我看来，这只是寻找客户端，因此我的回答会降低表格。

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

---

您的代码正在提交表单并回传。 将搜索按钮更改为类似<button id="searchBtn" class="searchButton" type="button" >search</button> ”，如<button id="searchBtn" class="searchButton" type="button" >search</button>这样可以防止默认的“submit”类型。

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

链接地址: http://www.djcxy.com/p/40593.html

上一篇: Get search box to filter results

下一篇: How to remove iOS 11 search bar from view and update UI