Live Demo - Typeahead JS Autocomplete With Image and Text Design

See Free Live Demo example of 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 eas...

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 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>';
    }
  },
});