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 -</title> <link href="" rel="stylesheet"> <link rel="stylesheet" type="text/css" href=""> <script src=""></script> <script src=""></script> <script src=""></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': ',0,86,86_.jpg'}, {'name':'race', 'image': ''}, {'name':'dabangg', 'image': ''}, {'name':'policegiri', 'image': ''}, {'name':'dhamaal', 'image': ''}, {'name':'bahubali', 'image': ''}, {'name':'dhoni', 'image': ''}, {'name':'Dangal', 'image': ''}, ] }); 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>''</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="" target="_blank"><button>More Info</button></a></div></div><div style="clear:both;"></div></div>'; } }, });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post

Random Blog