Search keywords with autocomplete and filter functions (single page)
The code below will generate images with tags that can be searched. It can also filter those searchable through filter collection.
How it works: General Layout - below is the layout of each block image.
Example Page: http://letsgoship.com/shop-retailers/
How it works: General Layout - below is the layout of each block image.
- The li element will have a title where the filter tag will be. Enter in the title field the collections you want to filter by. Example: title="clothing"
- For multiple collection filters separate by comma then space. Example: title="clothing, beauty, sports"
- after the image element enter the tags you want your block image to be searchable by. Each tag is separated by <span> elements. Example: <span>best buy</span><span>best buy computers</span><span>computers</span><span>best buy electronics</span><span>best electronics</span>
- each element in the <span> will be in the autocomplete dropdown of the search field
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/1-apple.png" /></a> <span>apple</span><span>computers</span><span>apple computers</span></li>
Example Page: http://letsgoship.com/shop-retailers/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<style>
/* this declares a better box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.list-wrap label {
float:left;
color:#00BDE8;
}
.search-box {
float:left;
clear:left;
width:70%;
padding:0.4em;
font-size:1em;
color:#555;
}
.list-count {
float:left;
text-align:center;
width:30%;
padding:0.5em;
color:#ddd;
}
li {
transition-property: margin, background-color, border-color;
transition-duration: .4s, .2s, .2s;
transition-timing-function: ease-in-out, ease, ease;
}
.empty-item {
transition-property: opacity;
transition-duration: 0s;
transition-delay: 0s;
transition-timing-function: ease;
}
.empty .empty-item {
transition-property: opacity;
transition-duration: .2s;
transition-delay: .3s;
transition-timing-function: ease;
}
.hiding {
margin-left:-100%;
opacity:0.5;
}
.hidden {
display:none;
}
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: auto !important;
list-style: none;
}
ul#list:before {
content:'desserts';
position:absolute;
left:-2.8em;
font-size:3em;
text-align:right;
top:1.5em;
color:#ededed;
font-weight:bold;
font-family: 'Maven Pro', sans-serif;
transform:rotate(-90deg);
}
ul#list li span{
display: none;
}
ul#list li:hover {
background-color:#f9f9f9;
border-color:#00BDE8;
}
.empty-item {
background:#fff;
color:#ddd;
margin:0.2em 0;
padding:0.5em 0.8em;
font-style:italic;
border:none;
text-align:center;
visibility:hidden;
opacity:0;
float:left;
clear:left;
width:100%;
}
.empty .empty-item {
opacity:1;
visibility:visible;
}
ul.ui-autocomplete{
top: 60px;
bottom: unset;
left: 15px;
margin-left: 0px!important
}
.template-page ul{
margin-left: 0px!important
}
.filter-popup-wrapper{
display: none;
z-index: 9;
background: #00000090;
position: fixed;
width: 100%;
height: 100%;
}
.filter-popup-container{
position: absolute;
width: 100%;
max-width: 600px;
top: 50%;
left: 0;
right: 0;
margin: -300px auto 0;
background: #ebebeb;
}
.filter-popup-top-wrapper{
background: #000000;
padding: 20px 5px;
text-align: center;
font-size: 18px;
color: #ffffff;
}
.filter-popup-top-close{
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
}
.filter-popup-body-wrapper{
padding: 5px 10px;
}
.filter-popup-body-tag{
border-radius: 10px;
background: #ffffff;
color: #000000;
width: 45%;
float: left;
text-align: center;
padding: 10px 5px;
margin: 10px 2.5%;
font-size: 16px;
cursor: pointer;
}
.filter-popup-body-tag:hover{
background: #000000;
color: #ffffff;
}
.filter-popup-footer-wrapper{
clear: both;
text-align: center;
padding: 20px 30px;
}
.filter-popup-footer-btn{
border-radius: 20px;
padding: 10px 5px;
color: #ffffff;
margin: 10px auto;
font-size: 17px;
cursor: pointer;
}
#filter-popup-footer-btn-filter{
background: black;
}
#filter-popup-footer-btn-clear{
background: grey;
}
.filter-tag-on{
background: black;
color: white;
font-weight: bold;
}
.perma-hidden{
display: none!important;
}
.cstm-head-search-icn{
cursor: pointer;
}
#search-text{
box-shadow: 0px 0px 1px;
}
@media only screen and (max-width: 415px){
#shop-ret-custm-id span.cstm-head-search-icn{
position: unset;
display: block;
width: 50%;
text-align: center;
background: #07255a;
height: auto;
float: left;
padding: 10px 0;
box-shadow: 0px 0px 1px;
margin: 0 0 20px;
border-radius: 10px;
}
}
</style>
</head>
<body>
<div class="filter-popup-wrapper">
<div class="filter-popup-container">
<div class="filter-popup-top-wrapper">
<div class="filter-popup-top-close">X</div>
<div class="filter-popup-top-title">Filter by categories</div>
</div>
<div class="filter-popup-body-wrapper">
<div class="filter-popup-body-tag">beauty</div>
<div class="filter-popup-body-tag">clothing</div>
<div class="filter-popup-body-tag">electronic</div>
<div class="filter-popup-body-tag">sports</div>
<div class="filter-popup-body-tag">books</div>
</div>
<div class="filter-popup-footer-wrapper">
<div id="filter-popup-footer-btn-filter" class="filter-popup-footer-btn">Apply Filters ( <span>0</span> )</div>
<div id="filter-popup-footer-btn-clear" class="filter-popup-footer-btn">Clear</div>
</div>
</div>
</div>
<div class="tablet-wraper">
<div class="tablet-header">
<div class="cstm-row-for-head">
<a href="http://letsgoship.com/" class="header-crner-head"> <img src="http://letsgoship.com/wp-content/uploads/2019/04/LGS.png" /> </a>
<div class="search__input_custm-wraper">
<input id="search-text" class="search-box search__input_custm" type="text" placeholder="Search">
<span class="cstm-head-search-icn"> <i class="fa fa-sliders"> </i> </span>
</div>
<span class="cart-lable-wapper"><i class="fa fa-th"></i> </span>
</div>
</div>
<div class="tablet-content">
<div class="cstm-row">
<ul id="list">
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/1-apple.png" /></a> <span>apple</span><span>computers</span><span>apple computers</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/2-adidas.png" /></a> <span>adidas</span> <span>adidas shoes</span> <span>shoes</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/3-best-buy.png" /></a> <span>best buy</span> <span>best buy computers</span><span>computers</span> <span>best buy electronics</span><span>best electronics</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/4-oath.png" /></a> <span>oath</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/5-anilmal.png" /></a> <span>animal</span> <span>animal planet</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/6-zappos.png" /></a> <span>zappos</span> <span>zappos shoes</span> <span>shoes</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/7-mk.png" /></a> <span>mk</span> <span>michael kors</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/8-a-plant.png" /></a> <span>animal</span> <span>animal planet</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/9-cisco.png" /></a> <span>cisco</span> <span>technology</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/10-asos.png" /></a> <span>asos</span> <span>clothes</span><span>fashion</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/11-nike.png" /></a> <span>nike</span> <span>nike shoes</span> <span>shoes</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/12-dillards.png" /></a> <span>dillards</span></li>
<li class="tablet-icon" title="clothing"> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/13-target.png" /></a> <span>target</span></li>
<li class="tablet-icon" title="clothing"> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/14-adorama.png" /></a> <span>adorama</span></li>
<li class="tablet-icon" title="clothing, beauty, sports, books, electronic"> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/15-walmart.png" /></a> <span>walmart</span></li>
<li class="tablet-icon" title="electronic"> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/16-ebay.png" /></a> <span>ebay</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/1-apple.png" /></a> <span>apple</span></li>
<li class="tablet-icon" title="clothing, sports"> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/2-adidas.png" /></a> <span>adidas</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/3-best-buy.png" /></a> <span>best buy</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/4-oath.png" /></a> <span>oath</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/5-anilmal.png" /></a> <span>animal</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/6-zappos.png" /></a> <span>zappos</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/7-mk.png" /></a> <span>mk</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/8-a-plant.png" /></a> <span>a plant</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/9-cisco.png" /></a> <span>cisco</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/10-asos.png" /></a> <span>asos</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/11-nike.png" /></a> <span>nike</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/12-dillards.png" /></a> <span>dillards</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/13-target.png" /></a> <span>target</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/14-adorama.png" /></a> <span>adorama</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/15-walmart.png" /></a> <span>walmart</span></li>
<li class="tablet-icon" title=""> <a href="#" ><img src="http://letsgoship.com/wp-content/uploads/2019/10/16-ebay.png" /></a> <span>ebay</span></li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function() {
setTimeout(function(){
$('#ui-id-1').appendTo('.search__input_custm-wraper');
}, 1000);
var jobCount = $('#list .in').length;
$('.list-count').text(jobCount + ' items');
$("#search-text").keyup(function () {
//$(this).addClass('hidden');
var searchTerm = $("#search-text").val();
var listItem = $('#list').children('li').children('span');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#list li span").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).parent('li').addClass('hiding out').removeClass('in');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
$("#list li span:containsi('" + searchSplit + "')").each(function(e) {
$(this).parent('li').removeClass('hidden out').addClass('in');
setTimeout(function() {
$('.in').removeClass('hiding');
}, 1);
});
var jobCount = $('#list .in').length;
$('.list-count').text(jobCount + ' items');
//shows empty state text when no jobs found
if(jobCount == '0') {
$('#list').addClass('empty');
}
else {
$('#list').removeClass('empty');
}
});
/*
An extra! This function implements
jQuery autocomplete in the searchbox.
Uncomment to use :)
*/
function searchList() {
//array of list items
var listArray = [];
$("#list li span").each(function() {
var listText = $(this).text().trim();
listArray.push(listText);
});
var uniqueNames = [];
$.each(listArray, function(i, el){
if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});
$('#search-text').autocomplete({
source: uniqueNames
});
}
searchList();
});
$(".cstm-head-search-icn").click(function () {
$('.filter-popup-wrapper').fadeIn();
});
$(".filter-popup-top-close").click(function () {
$('.filter-popup-wrapper').fadeOut();
});
$(".filter-popup-body-tag").click(function () {
$(this).toggleClass('filter-tag-on');
var filterClickedTotal = $('#filter-popup-footer-btn-filter > span').text();
if( $(this).hasClass('filter-tag-on') ){
$('#filter-popup-footer-btn-filter > span').text(parseInt(filterClickedTotal)+1);
}
else{
$('#filter-popup-footer-btn-filter > span').text(parseInt(filterClickedTotal)-1);
}
});
$("#filter-popup-footer-btn-filter").click(function () {
$('.filter-popup-wrapper').fadeOut();
if( $('.filter-popup-body-tag.filter-tag-on').length ){}else{ $('.perma-hidden').removeClass('perma-hidden'); return false}
var filterArray = [];
$(".filter-popup-body-tag.filter-tag-on").each(function() {
var filterTag = $(this).text().trim();
filterArray.push(filterTag);
//$("#list li:not([title='"+filterTag+"'])").addClass('perma-hidden');
});
$("#list li").each(function() {
var filterTag = $(this).attr('title');
var thisLi = $(this);
if( filterTag.indexOf(',') != -1 ){
filterTag = $(this).attr('title').split(', ');
for(var i = 0; i < filterTag.length; i++){
//console.log(filterTag[i]);
if(jQuery.inArray(filterTag[i], filterArray) !== -1){
thisLi.removeClass('perma-hidden');
break;
}
else{
thisLi.addClass('perma-hidden');
}
};
}
else{
filterTag = $(this).attr('title');
if(jQuery.inArray(filterTag, filterArray) !== -1){
$(this).removeClass('perma-hidden');
}
else{
$(this).addClass('perma-hidden');
}
}
//console.log('Tag: '+filterTag);
//console.log('Arrray: '+filterArray);
});
});
$("#filter-popup-footer-btn-clear").click(function () {
$('.filter-popup-wrapper').fadeOut();
$('.filter-tag-on').removeClass('filter-tag-on');
$('.perma-hidden').removeClass('perma-hidden');
$('#filter-popup-footer-btn-filter > span').text('0');
});
</script>
</body>
</html>