{"id":66,"date":"2025-09-23T18:12:16","date_gmt":"2025-09-23T18:12:16","guid":{"rendered":"https:\/\/firemovement.comunifecali.org\/index.php\/events-list-style-with-search-box\/"},"modified":"2025-09-23T18:12:16","modified_gmt":"2025-09-23T18:12:16","slug":"events-list-style-with-search-box","status":"publish","type":"page","link":"https:\/\/firemovement.comunifecali.org\/index.php\/events-list-style-with-search-box\/","title":{"rendered":"Events \u2013 List Style with Search Box"},"content":{"rendered":"        <div class='list_with_filter_section mep_event_list'>\n\t\t\t            <div class=\"mpStyle\">\r\n                <div class=\"search_sort_code_area\">\r\n                    <div class=\"search_sort_code\">\r\n                        <div class=\"sort_code_search_box defaultLayout_xs\">\r\n                            <div class=\"flexEqual filter_input_area\">\r\n                                                                    <label>\r\n                                        <input type=\"text\" name=\"filter_with_title\" class=\"formControl\" placeholder=\"Search by Title\">\r\n                                    <\/label>\r\n                                                                    <label>\r\n                                        <input type=\"date\" name=\"filter_with_date\" class=\"formControl\">\r\n                                    <\/label>\r\n                                                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"textGray textCenter search_sort_code_counts\">\r\n                    Showing                    <strong class=\"qty_count\">-1<\/strong>\r\n                    of                    <strong class=\"total_filter_qty\">0<\/strong>\r\n                <\/p>\r\n            <\/div>\r\n                        <div class=\"all_filter_item mep_event_list_sec\" id='mep_event_list_abr69df121b673d8'>\n\t\t\t\t<div class=\"mage_grid_box\">            <\/div>\n        <\/div>\n\t\t            <input type=\"hidden\" name=\"pagination_per_page\" value=\"0\"\/>\r\n            <input type=\"hidden\" name=\"pagination_style\" value=\"load_more\"\/>\r\n                    <\/div>\n        <script>\n            jQuery(document).ready(function () {\n                var containerEl = document.querySelector('#mep_event_list_abr69df121b673d8');\n                var mixer = mixitup(containerEl, {\n                    selectors: {\n                        target: '.mep-event-list-loop',\n                        control: '[data-mixitup-control]'\n                    }\n                });\n                \/\/ Handle title filter input\n                jQuery('input[name=\"filter_with_title\"]').on('keyup', function () {\n                    var searchText = jQuery(this).val().toLowerCase();\n                    var items = jQuery('.mep-event-list-loop');\n                    items.each(function () {\n                        var itemTitle = jQuery(this).data('title').toLowerCase();\n                        if (itemTitle.indexOf(searchText) > -1) {\n                            jQuery(this).show();\n                        } else {\n                            jQuery(this).hide();\n                        }\n                    });\n                });\n                \/\/ Handle date filter change\n                jQuery('input[name=\"filter_with_date\"]').on('change', function () {\n                    var selectedDate = jQuery(this).val();\n                    var items = jQuery('.mep-event-list-loop');\n                    if (!selectedDate) {\n                        items.show();\n                    } else {\n                        var filterDate = new Date(selectedDate);\n                        filterDate.setHours(0, 0, 0, 0); \/\/ Reset time part for date comparison\n                        items.each(function () {\n                            var itemDate = new Date(jQuery(this).data('date'));\n                            itemDate.setHours(0, 0, 0, 0); \/\/ Reset time part for date comparison\n                            if (itemDate.getTime() === filterDate.getTime()) {\n                                jQuery(this).show();\n                            } else {\n                                jQuery(this).hide();\n                            }\n                        });\n                    }\n                });\n                \/\/ Handle state filter change\n                jQuery('select[name=\"filter_with_state\"]').on('change', function () {\n                    var state = jQuery(this).val();\n                    var items = jQuery('.mep-event-list-loop');\n                    if (state === '') {\n                        items.show();\n                    } else {\n                        items.each(function () {\n                            var itemState = jQuery(this).data('state');\n                            if (itemState === state) {\n                                jQuery(this).show();\n                            } else {\n                                jQuery(this).hide();\n                            }\n                        });\n                    }\n                });\n                \/\/ Handle city filter change\n                jQuery('select[name=\"filter_with_city\"]').on('change', function () {\n                    var city = jQuery(this).val();\n                    var items = jQuery('.mep-event-list-loop');\n                    if (city === '') {\n                        items.show();\n                    } else {\n                        items.each(function () {\n                            var itemCity = jQuery(this).data('city-name');\n                            if (itemCity === city) {\n                                jQuery(this).show();\n                            } else {\n                                jQuery(this).hide();\n                            }\n                        });\n                    }\n                });\n\t\t\t\t\t\t\t\t            });\n        <\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-66","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/pages\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":0,"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/pages\/66\/revisions"}],"wp:attachment":[{"href":"https:\/\/firemovement.comunifecali.org\/index.php\/wp-json\/wp\/v2\/media?parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}