NiceSnippets.com
Typeahead JS Autocomplete With Image and Text Design
After some research on autocomplete, I found typeahead js best plugin and decide to create the best design and share with you guys. In this snippet, you will get a nice layout of autocomplete with image and text like you can see on facebook autocomplete and twitter search. You can also customize easily. also, I added time and text with an auto-suggestion.
So basically, you can use autocomplete in your website home page. I see on several website front page for a search for products, movies etc and it looks amazing. So you can simply do it with typeahead js plugin.
I post all code of this snippet and you can also download full code and check demo too.
<!DOCTYPE html>
<html>
<head>
<title>Typeahead JS Autocomplete With Image and Text Design - Nicesnippets.com</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="section">
<div id="the-basics">
<input class="typeahead form-control" type="text" placeholder="Search Film Name" autocomplete="off">
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
body{
background-color: #f5f5f5;
}
.section{
font-family: 'Roboto Condensed', sans-serif;
position: absolute;
top:10%;
left:50%;
transform: translate(-85%,0%);
}
.typeahead{
padding:15px 200px;
width:100% !important;
background-color: #fff !important;
padding-left:40px !important;
font-size:18px;
}
.empty-message{
color:red;
text-align: center;
padding:10px 0px;
}
.tt-menu {
display: block;
width:152%;
background-color: #fff;
border:unset !important;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
cursor: pointer;
}
.man-section{
position: relative;
width:94%;
border-bottom:1px solid #d2d2d2;;
font-family: 'Roboto Condensed', sans-serif;
}
.image-section{
width:10%;
float:left;
display: table;
}
.image-section img{
width:70px;
height:70px;
border:1px solid #000;
display: table-cell;
vertical-align: middle;
margin:6px 0px 5px -9px;
}
.description-section{
float:left;
width:80%;
}
.description-section h1{
margin:0px;
font-weight: bold;
padding:0px 7px;
font-size:16px;
color:#000;
margin-top:4px;
text-transform: uppercase;
}
.description-section p{
margin:0px;
padding:0px 1px 0px 8px;
font-size:14px;
color:#7d7f80;
line-height: 15px;
}
.description-section span{
padding:7px;
font-size:13px;
color:#a09999;
}
.more-section{
position: absolute;
bottom:7px;
right:16px;
}
.more-section a{
text-decoration: none;
}
.more-section button{
border:unset;
color:#fff;
border-radius: 5px;
padding:5px;
background-color:#5D4C46 !important;
}
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{'name':'Dhoom', 'image': 'https://m.media-amazon.com/images/M/MV5BM2E0NWJlNzYtZjFlZS00NDU4LWI0OTAtYTZlYjc2MmQ2MjdmXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX86_CR0,0,86,86_.jpg'},
{'name':'race', 'image': 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQl0UEtp4TVEwV-QLy4HN8pdvUyZSSKeAs5MPHeNZyLjaMDQNi'},
{'name':'dabangg', 'image': 'http://gangbuzzz.com/wp-content/uploads/2018/05/Salman-khan-mouni-roy-Sonakshi-Sinha-arbaaz-khan-upcoming-film-dabangg-3-150x150.jpg'},
{'name':'policegiri', 'image': 'https://i.pinimg.com/originals/f9/71/19/f97119560f489a8eeda6220048d7a3e3.jpg'},
{'name':'dhamaal', 'image': 'https://c.saavncdn.com/744/Dhamaal-Hindi-2009-150x150.jpg'},
{'name':'bahubali', 'image': 'http://t.mp3load.vc/c/4569_4.jpg'},
{'name':'dhoni', 'image': 'http://northbridgetimes.com/wp-content/uploads/2016/09/ms-dhoni-the-untold-story-poster-150x150.jpg'},
{'name':'Dangal', 'image': 'https://upcomingmoviesdate.com/wp-content/uploads/2016/10/Dangal-Poster-150x150.jpg'},
]
});
states.initialize();
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
display: 'name',
source: states.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'No Record Found !',
'</div>'
].join('\n'),
suggestion: function (data) {
return '<div class="man-section"><div class="image-section"><img src='+data.image+'></div><div class="description-section"><h1>'+data.name+'</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM <i class="fa fa-map-marker" aria-hidden="true"></i> Rajkot</span><div class="more-section"><a href="https://nicesnippets.com" target="_blank"><button>More Info</button></a></div></div><div style="clear:both;"></div></div>';
}
},
});
