{"id":6,"date":"2019-04-01T16:58:52","date_gmt":"2019-04-01T14:58:52","guid":{"rendered":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/?page_id=6"},"modified":"2019-05-26T20:32:51","modified_gmt":"2019-05-26T18:32:51","slug":"wp-live-content-filter-demo","status":"publish","type":"page","link":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/","title":{"rendered":"WP Live Content Filter Demo"},"content":{"rendered":"<p><a name=\"simple-demo\"><\/a><\/p>\n<h1>Simple demo<\/h1>\n<p>This is the simplest way to use the shortcode.<\/p>\n<p><code>&lsqb;wp-lcf container_selector=\".list1\" filter_selector=\"li\"]Write something here[\/wp-lcf&rsqb;<\/code><\/p>\n<p>produce the following filter box (the list is ot generated from the plugin!).<\/p>\n<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".list1\" data-filter-selector=\"li\" data-filter-type=\"containText\" data-filter-group=\"\" data-effect-selector=\"li\" data-layout-type=\"list\" data-uid=\"cq9h5\" placeholder=\"Write something here\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".list1\"><\/span>\n\t\t\t\t\t\t\t\t\t<\/div>\n<\/div>\n\n<ul class=\"list1\">\n<li>Abarth<\/li>\n<li>Basel<\/li>\n<li>B Engineering<\/li>\n<li>Centenari<\/li>\n<li>Bertone<\/li>\n<li>Casalini<\/li>\n<li>Covini<\/li>\n<li>DR<\/li>\n<li>Effedi<\/li>\n<li>Faralli &amp; Mazzanti<\/li>\n<li>Ferrari<\/li>\n<li>Fornasari<\/li>\n<li>Giottiline<\/li>\n<li>Lamborghini<\/li>\n<li>Lancia<\/li>\n<li>Maserati<\/li>\n<li>Pagani<\/li>\n<li>Picchio<\/li>\n<\/ul>\n<p><a name=\"full-text-search\"><\/a><\/p>\n<h1>Full text search<\/h1>\n<p>This example show how to display a filter box for a &#8220;full text&#8221; filter (or &#8220;contain text&#8221;) and with customization of showing and hiding effect for the filtered elements.<\/p>\n<p><code>&lsqb;wp-lcf container_selector=\".list2\" filter_selector=\"li a\" filter_type=\"containText\" effect_selector=\"li\"]Write something here[\/wp-lcf&rsqb;<\/code><\/p>\n<p>produce the following filter box<\/p>\n<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".list2\" data-filter-selector=\"li a\" data-filter-type=\"containText\" data-filter-group=\"\" data-effect-selector=\"li\" data-layout-type=\"list\" data-uid=\"d9uo3\" placeholder=\"Write something here\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".list2\"><\/span>\n\t\t\t\t\t\t\t\t\t<\/div>\n<\/div>\n\n<ul class=\"list2\">\n<li><a title=\"Abarth\" href=\"http:\/\/en.wikipedia.org\/wiki\/Abarth\">Abarth<\/a> (1949\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Basel Motors (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Basel_Motors&amp;action=edit&amp;redlink=1\">Basel<\/a> (1990\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"B Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/B_Engineering\">B Engineering<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Centenari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Centenari\">Centenari<\/a> (1991\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Gruppo Bertone\" href=\"http:\/\/en.wikipedia.org\/wiki\/Gruppo_Bertone\">Bertone<\/a> (1912\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Casalini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Casalini\">Casalini<\/a> (1969\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Covini Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/Covini_Engineering\">Covini<\/a> (1978\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"DR Motor Company\" href=\"http:\/\/en.wikipedia.org\/wiki\/DR_Motor_Company\">DR<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Effedi (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Effedi&amp;action=edit&amp;redlink=1\">Effedi<\/a> (1979\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Faralli &amp; Mazzanti (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Faralli_%26_Mazzanti&amp;action=edit&amp;redlink=1\">Faralli &amp; Mazzanti<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Ferrari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Ferrari\">Ferrari<\/a> (1947\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Fornasari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Fornasari\">Fornasari<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Giottiline\" href=\"http:\/\/en.wikipedia.org\/wiki\/Giottiline\">Giottiline<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lamborghini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lamborghini\">Lamborghini<\/a> (1963\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lancia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lancia\">Lancia<\/a> (1906\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Maserati\" href=\"http:\/\/en.wikipedia.org\/wiki\/Maserati\">Maserati<\/a> (1914\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Pagani (automobile)\" href=\"http:\/\/en.wikipedia.org\/wiki\/Pagani_%28automobile%29\">Pagani<\/a> (1992\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Picchio Racing Cars\" href=\"http:\/\/en.wikipedia.org\/wiki\/Picchio_Racing_Cars\">Picchio<\/a> (1989\u00e2\u20ac\u201cpresent)<\/li>\n<\/ul>\n<p><a name=\"beginning-search\"><\/a><\/p>\n<h1>Search with text beginning<\/h1>\n<p>This is for a &#8220;begin with text&#8221; filtering&#8230;<\/p>\n<p><code>&lsqb;wp-lcf container_selector=\".list3\" filter_selector=\"li a\" filter_type=\"startWithText\" effect_selector=\"li\"]Write something here[\/wp-lcf&rsqb;<\/code><\/p>\n<p>produce the following filter box<\/p>\n<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".list3\" data-filter-selector=\"li a\" data-filter-type=\"startWithText\" data-filter-group=\"\" data-effect-selector=\"li\" data-layout-type=\"list\" data-uid=\"lwxet\" placeholder=\"Write something here\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".list3\"><\/span>\n\t\t\t\t\t\t\t\t\t<\/div>\n<\/div>\n\n<ul class=\"list3\">\n<li><a title=\"Abarth\" href=\"http:\/\/en.wikipedia.org\/wiki\/Abarth\">Abarth<\/a> (1949\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Basel Motors (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Basel_Motors&amp;action=edit&amp;redlink=1\">Basel<\/a> (1990\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"B Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/B_Engineering\">B Engineering<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Centenari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Centenari\">Centenari<\/a> (1991\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Gruppo Bertone\" href=\"http:\/\/en.wikipedia.org\/wiki\/Gruppo_Bertone\">Bertone<\/a> (1912\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Casalini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Casalini\">Casalini<\/a> (1969\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Covini Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/Covini_Engineering\">Covini<\/a> (1978\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"DR Motor Company\" href=\"http:\/\/en.wikipedia.org\/wiki\/DR_Motor_Company\">DR<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Effedi (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Effedi&amp;action=edit&amp;redlink=1\">Effedi<\/a> (1979\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Faralli &amp; Mazzanti (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Faralli_%26_Mazzanti&amp;action=edit&amp;redlink=1\">Faralli &amp; Mazzanti<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Ferrari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Ferrari\">Ferrari<\/a> (1947\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Fornasari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Fornasari\">Fornasari<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Giottiline\" href=\"http:\/\/en.wikipedia.org\/wiki\/Giottiline\">Giottiline<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lamborghini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lamborghini\">Lamborghini<\/a> (1963\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lancia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lancia\">Lancia<\/a> (1906\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Maserati\" href=\"http:\/\/en.wikipedia.org\/wiki\/Maserati\">Maserati<\/a> (1914\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Pagani (automobile)\" href=\"http:\/\/en.wikipedia.org\/wiki\/Pagani_%28automobile%29\">Pagani<\/a> (1992\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Picchio Racing Cars\" href=\"http:\/\/en.wikipedia.org\/wiki\/Picchio_Racing_Cars\">Picchio<\/a> (1989\u00e2\u20ac\u201cpresent)<\/li>\n<\/ul>\n<h1>Woocommerce integration<\/h1>\n<p>The Woocommerce filter parameters are customizable from the configuration page.<\/p>\n<p>Check Woocommerce integration by click to the Woocommmerce Shop page in the sidebar menu.<\/p>\n<style>\n.grid4 .item { background-color: #fcc; margin-bottom: 4px; vertical-align: top;}<br \/>\n.grid .item { width:20%; min-height: 100px; }<br \/>\n<\/style>\n<p><a name=\"grid-filtering\"><\/a><\/p>\n<h1>Filtering grid elements<\/h1>\n<p>This example show ho to use the plugin to filter a grid of elements. There&#8217;s a sort icon that let you to sort the elements (&#8220;filter_selector&#8221;) and rearrange items (&#8220;effect_selector&#8221;) in a sorted order, and a layout change button to change layout of the items (list or grid).<\/p>\n<p><code>&lsqb;wp-lcf container_selector=\".grid4\" filter_selector=\".item a\" effect_selector=\".item\" sort_button=\"yes\" layout_button=\"yes\" layout_type=\"grid\"]Write something here[\/wp-lcf&rsqb;<\/code><\/p>\n<p>produce the following filter box<\/p>\n<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".grid4\" data-filter-selector=\".item a\" data-filter-type=\"containText\" data-filter-group=\"\" data-effect-selector=\".item\" data-layout-type=\"grid\" data-uid=\"v4hb7\" placeholder=\"Write something here\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".grid4\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-v4hb7:none\" data-container-selector=\".grid4\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Change layout\" class=\"wplcf-layout wplcf-button dashicons-before dashicons-grid-view\" data-layout=\"grid\" data-container-selector=\".grid4\"><\/span>\n\t\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"grid4 grid\">\n<div class=\"item\"><a title=\"Abarth\" href=\"http:\/\/en.wikipedia.org\/wiki\/Abarth\">Abarth<\/a> (1949\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a class=\"new\" title=\"Basel Motors (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Basel_Motors&amp;action=edit&amp;redlink=1\">Basel<\/a> (1990\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"B Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/B_Engineering\">B Engineering<\/a> (2001\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Centenari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Centenari\">Centenari<\/a> (1991\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Gruppo Bertone\" href=\"http:\/\/en.wikipedia.org\/wiki\/Gruppo_Bertone\">Bertone<\/a> (1912\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Casalini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Casalini\">Casalini<\/a> (1969\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Covini Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/Covini_Engineering\">Covini<\/a> (1978\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"DR Motor Company\" href=\"http:\/\/en.wikipedia.org\/wiki\/DR_Motor_Company\">DR<\/a> (2006\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a class=\"new\" title=\"Effedi (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Effedi&amp;action=edit&amp;redlink=1\">Effedi<\/a> (1979\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a class=\"new\" title=\"Faralli e Mazzanti (page does not exist)\" href=\"#\">Faralli e Mazzanti<\/a> (2006\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Ferrari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Ferrari\">Ferrari<\/a> (1947\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Fornasari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Fornasari\">Fornasari<\/a> (2001\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Giottiline\" href=\"http:\/\/en.wikipedia.org\/wiki\/Giottiline\">Giottiline<\/a> (2006\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Lamborghini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lamborghini\">Lamborghini<\/a> (1963\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Lancia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lancia\">Lancia<\/a> (1906\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Maserati\" href=\"http:\/\/en.wikipedia.org\/wiki\/Maserati\">Maserati<\/a> (1914\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Pagani (automobile)\" href=\"http:\/\/en.wikipedia.org\/wiki\/Pagani_%28automobile%29\">Pagani<\/a> (1992\u00e2\u20ac\u201cpresent)<\/div>\n<div class=\"item\"><a title=\"Picchio Racing Cars\" href=\"http:\/\/en.wikipedia.org\/wiki\/Picchio_Racing_Cars\">Picchio<\/a> (1989\u00e2\u20ac\u201cpresent)<\/div>\n<\/div>\n<p><a name=\"order-button-and-layout-change\"><\/a><\/p>\n<h1>Ordering button and filter presets and layout change button<\/h1>\n<p><code>&lsqb;wp-lcf container_selector=\".list5\" filter_selector=\"li a\" filter_type=\"containText\" sort_button=\"yes\" clear_button=\"yes\" layout_button=\"yes\" layout_type=\"list\" effect_selector=\"li\" filter_presets=\"Ferrari,Maserati\"]Write something here[\/wp-lcf&rsqb;<\/code><\/p>\n<p>produce the following filter box<\/p>\n<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".list5\" data-filter-selector=\"li a\" data-filter-type=\"containText\" data-filter-group=\"\" data-effect-selector=\"li\" data-layout-type=\"list\" data-uid=\"c3i1v\" placeholder=\"Write something here\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".list5\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-c3i1v:none\" data-container-selector=\".list5\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Change layout\" class=\"wplcf-layout wplcf-button dashicons-before dashicons-list-view\" data-layout=\"list\" data-container-selector=\".list5\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Filter presets\" class=\"wplcf-presets wplcf-button dashicons-before dashicons-tag\">\n\t\t\t\t<ul class=\"wplcf-presets-list\">\n\t\t\t\t\t\t\t\t\t\t\t<li>Ferrari<\/li>\n\t\t\t\t\t\t\t\t\t\t\t<li>Maserati<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t<\/span>\n\t\t\t<\/div>\n<\/div>\n\n<ul class=\"list5\">\n<li><a title=\"Abarth\" href=\"http:\/\/en.wikipedia.org\/wiki\/Abarth\">Abarth<\/a> (1949\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"B Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/B_Engineering\">B Engineering<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Casalini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Casalini\">Casalini<\/a> (1969\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Covini Engineering\" href=\"http:\/\/en.wikipedia.org\/wiki\/Covini_Engineering\">Covini<\/a> (1978\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Giottiline\" href=\"http:\/\/en.wikipedia.org\/wiki\/Giottiline\">Giottiline<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Effedi (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Effedi&amp;action=edit&amp;redlink=1\">Effedi<\/a> (1979\u00e2\u20ac\u201cpresent)<\/li>\n<li><a class=\"new\" title=\"Faralli &amp; Mazzanti (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Faralli_%26_Mazzanti&amp;action=edit&amp;redlink=1\">Faralli &amp; Mazzanti<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Ferrari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Ferrari\">Ferrari<\/a> (1947\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Gruppo Bertone\" href=\"http:\/\/en.wikipedia.org\/wiki\/Gruppo_Bertone\">Bertone<\/a> (1912\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Maserati\" href=\"http:\/\/en.wikipedia.org\/wiki\/Maserati\">Maserati<\/a> (1914\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Fornasari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Fornasari\">Fornasari<\/a> (2001\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Pagani (automobile)\" href=\"http:\/\/en.wikipedia.org\/wiki\/Pagani_%28automobile%29\">Pagani<\/a> (1992\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Basel Motors (page does not exist)\" href=\"http:\/\/en.wikipedia.org\/w\/index.php?title=Basel_Motors&amp;action=edit&amp;redlink=1\">Basel<\/a> (1990\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lamborghini\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lamborghini\">Lamborghini<\/a> (1963\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Centenari\" href=\"http:\/\/en.wikipedia.org\/wiki\/Centenari\">Centenari<\/a> (1991\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"DR Motor Company\" href=\"http:\/\/en.wikipedia.org\/wiki\/DR_Motor_Company\">DR<\/a> (2006\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Lancia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Lancia\">Lancia<\/a> (1906\u00e2\u20ac\u201cpresent)<\/li>\n<li><a title=\"Picchio Racing Cars\" href=\"http:\/\/en.wikipedia.org\/wiki\/Picchio_Racing_Cars\">Picchio<\/a> (1989\u00e2\u20ac\u201cpresent)<\/li>\n<\/ul>\n<p><a name=\"multiple-filtering\"><\/a><\/p>\n<h1>Table-based data multiple filtering<\/h1>\n<p><code><br \/>\n&lt;table class=\"table1\"&gt;<br \/>\n&lt;thead&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;th&gt;Name&lt;\/th&gt;<br \/>\n&lt;th&gt;Surname&lt;\/th&gt;<br \/>\n&lt;th&gt;Department&lt;\/th&gt;<br \/>\n&lt;th&gt;Position&lt;\/th&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lsqb;wp-lcf container_selector=\".table1\" filter_selector=\"tbody tr td:first-child\" effect_selector=\"tbody tr\" filter_type=\"startWithText\" filter_group=\"group1\" clear_button=\"yes\" layout_type=\"table\" sort_button=\"yes\"&rsqb;Name&lsqb;\/wp-lcf&rsqb;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lsqb;wp-lcf container_selector=\".table1\" filter_selector=\"tbody tr td:nth-child(2)\" effect_selector=\"tbody tr\" filter_type=\"startWithText\" filter_group=\"group1\" clear_button=\"yes\" layout_type=\"table\" sort_button=\"yes\"&rsqb;Surname&lsqb;\/wp-lcf&rsqb;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lsqb;wp-lcf container_selector=\".table1\" filter_selector=\"tbody tr td:nth-child(3)\" effect_selector=\"tbody tr\" filter_type=\"startWithText\" filter_group=\"group1\" clear_button=\"yes\" layout_type=\"table\" sort_button=\"yes\"&rsqb;Department&lsqb;\/wp-lcf&rsqb;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lsqb;wp-lcf container_selector=\".table1\" filter_selector=\"tbody tr td:nth-child(4)\" effect_selector=\"tbody tr\" filter_type=\"startWithText\" filter_group=\"group1\" clear_button=\"yes\" layout_type=\"table\" sort_button=\"yes\"&rsqb;Position&lsqb;\/wp-lcf&rsqb;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/thead&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Robert&lt;\/td&gt;<br \/>\n&lt;td&gt;Black&lt;\/td&gt;<br \/>\n&lt;td&gt;Engineering&lt;\/td&gt;<br \/>\n&lt;td&gt;Director&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Emily&lt;\/td&gt;<br \/>\n&lt;td&gt;Green&lt;\/td&gt;<br \/>\n&lt;td&gt;Management&lt;\/td&gt;<br \/>\n&lt;td&gt;Advisor&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Edward&lt;\/td&gt;<br \/>\n&lt;td&gt;Brown&lt;\/td&gt;<br \/>\n&lt;td&gt;Sales&lt;\/td&gt;<br \/>\n&lt;td&gt;Director&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Mary&lt;\/td&gt;<br \/>\n&lt;td&gt;White&lt;\/td&gt;<br \/>\n&lt;td&gt;Engineering&lt;\/td&gt;<br \/>\n&lt;td&gt;Advisor&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<\/code><\/p>\n<p>produce the following filters<\/p>\n<style>\n.table1 thead th { font-size: 1.2em; font-weight: bold; }<br \/>\n.table1 tbody tr, .table1 thead { border-bottom: 1px solid #ccc; }<br \/>\n<\/style>\n<table class=\"table1\">\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Surname<\/th>\n<th>Department<\/th>\n<th>Position<\/th>\n<\/tr>\n<tr>\n<td><div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".table1\" data-filter-selector=\"tbody tr td:first-child\" data-filter-type=\"startWithText\" data-filter-group=\"group1\" data-effect-selector=\"tbody tr\" data-layout-type=\"table\" data-uid=\"oc6ig\" placeholder=\"Name\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-group-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-oc6ig:none\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<\/div>\n<\/div>\n<\/td>\n<td><div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".table1\" data-filter-selector=\"tbody tr td:nth-child(2)\" data-filter-type=\"startWithText\" data-filter-group=\"group1\" data-effect-selector=\"tbody tr\" data-layout-type=\"table\" data-uid=\"32wko\" placeholder=\"Surname\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-group-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-32wko:none\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<\/div>\n<\/div>\n<\/td>\n<td><div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".table1\" data-filter-selector=\"tbody tr td:nth-child(3)\" data-filter-type=\"startWithText\" data-filter-group=\"group1\" data-effect-selector=\"tbody tr\" data-layout-type=\"table\" data-uid=\"7k9ax\" placeholder=\"Department\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-group-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-7k9ax:none\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<\/div>\n<\/div>\n<\/td>\n<td><div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\".table1\" data-filter-selector=\"tbody tr td:nth-child(4)\" data-filter-type=\"startWithText\" data-filter-group=\"group1\" data-effect-selector=\"tbody tr\" data-layout-type=\"table\" data-uid=\"oqxzb\" placeholder=\"Position\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-group-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-oqxzb:none\" data-container-selector=\".table1\"><\/span>\n\t\t\t\t\t\t\t<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Robert<\/td>\n<td>Black<\/td>\n<td>Engineering<\/td>\n<td>Director<\/td>\n<\/tr>\n<tr>\n<td>Emily<\/td>\n<td>Green<\/td>\n<td>Management<\/td>\n<td>Advisor<\/td>\n<\/tr>\n<tr>\n<td>Edward<\/td>\n<td>Brown<\/td>\n<td>Sales<\/td>\n<td>Director<\/td>\n<\/tr>\n<tr>\n<td>Mary<\/td>\n<td>White<\/td>\n<td>Engineering<\/td>\n<td>Advisor<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"visual-composer\"><\/a><\/p>\n<h1>Visual Composer Images<\/h1>\n<p>The plugin works wit Visual Composer images too. Here is a demo:<\/p>\n<p>[vc_row][vc_column][vc_column_text]<div class=\"wplcf-wrapper\">\n\t<div class=\"wplcf-container\">\n\t\t<input class=\"wplcf-filter \"  type=\"text\" value=\"\" data-container-selector=\"#grid_vc\" data-filter-selector=\".vc_column_container figcaption\" data-filter-type=\"containText\" data-filter-group=\"\" data-effect-selector=\".vc_column_container\" data-layout-type=\"grid\" data-uid=\"fin53\" placeholder=\"What are you looking for?\" \/>\n\t\t\t\t\t<span title=\"Clear filter\" class=\"wplcf-clear wplcf-button dashicons-before dashicons-no\" data-container-selector=\"#grid_vc\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Sorting\" class=\"wplcf-sort wplcf-button dashicons-before dashicons-sort\" data-sort=\"wplcf-order-fin53:none\" data-container-selector=\"#grid_vc\"><\/span>\n\t\t\t\t\t\t\t<span title=\"Change layout\" class=\"wplcf-layout wplcf-button dashicons-before dashicons-grid-view\" data-layout=\"grid\" data-container-selector=\"#grid_vc\"><\/span>\n\t\t\t\t\t<\/div>\n<\/div>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;grid_vc&#8221;][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Joe Black&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Susan White&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Bill Green&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Albert White&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Fred Yellow&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_single_image source=&#8221;external_link&#8221; external_img_size=&#8221;&#8221; alignment=&#8221;center&#8221; custom_src=&#8221;https:\/\/placehold.it\/180&#215;180&#8243; caption=&#8221;Alice Green&#8221;][\/vc_column][\/vc_row]<\/p>\n<p>And this is the code to render the demo:<\/p>\n<p><code>&lsqb;vc_row&rsqb;&lsqb;vc_column&rsqb;&lsqb;vc_column_text&rsqb;&lsqb;wp-lcf container_selector=\"#grid_vc\" filter_selector=\".vc_column_container figcaption\" effect_selector=\".vc_column_container\" filter_type=\"containText\" clear_button=\"yes\" sort_button=\"yes\" layout_button=\"yes\" layout_type=\"grid\"&rsqb;What are you looking for?&lsqb;\/wp-lcf&rsqb;&lsqb;\/vc_column_text&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;\/vc_row&rsqb;&lsqb;vc_row el_id=\"grid_vc\"&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Joe Black\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Susan White\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Bill Green\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Albert White\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Fred Yellow\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;vc_column width=\"1\/3\"&rsqb;&lsqb;vc_single_image source=\"external_link\" external_img_size=\"\" alignment=\"center\" custom_src=\"https:\/\/placehold.it\/180x180\" caption=\"Alice Green\"&rsqb;&lsqb;\/vc_column&rsqb;&lsqb;\/vc_row&rsqb;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simple demo This is the simplest way to use the shortcode. &lsqb;wp-lcf container_selector=&#8221;.list1&#8243; filter_selector=&#8221;li&#8221;]Write something here[\/wp-lcf&rsqb; produce the following filter box (the list is ot generated from the plugin!). Abarth Basel B Engineering Centenari Bertone Casalini Covini DR Effedi Faralli &amp; Mazzanti Ferrari Fornasari Giottiline Lamborghini Lancia Maserati Pagani Picchio Full text search This example [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/pages\/6"}],"collection":[{"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":13,"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/pages\/6\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/wpdemo.accolore.com\/wp-live-content-filter\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}