Skip to content

Instantly share code, notes, and snippets.

@gvost

gvost/index-typeahead.html

Last active August 29, 2015 14:27
Show Gist options
  • Save gvost/47d88f30a83d74526189 to your computer and use it in GitHub Desktop.
Save gvost/47d88f30a83d74526189 to your computer and use it in GitHub Desktop.
Download ZIP
A simple implementation of twitter-typeahead to include images (or other additional data to results) in this example there images and state codes.
Raw
index-typeahead.html
<!DOCTYPE HTML>
<html>
<head>
<title>type</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<style>
.thumbnail {
width: 20px;
display: inline-block;
margin-right: 10px;
}
.small {
font-size: 10px;
font-weight: 100;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h3>type</h3>
<input id="search" type="text" placeholder="type state">
</div>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
// could just as easily be ajax call
var data = [
{ "stateCode": "CA",
"stateName": "California",
"image": "images/ca.jpg"
},
{ "stateCode": "AZ",
"stateName": "Arizona",
"image": "images/az.jpg"
},
{ "stateCode": "NY",
"stateName": "New York",
"image": "images/ny.jpg"
},
{ "stateCode": "NV",
"stateName": "Nevada",
"image": "images/nv.jpg"
},
{ "stateCode": "IL",
"stateName": "Illinois",
"image": "images/il.jpg"
}
];
var states;
var map;
$('#search').typeahead({
source: function(query, process) {
map = {};
states = [];
$.each(data, function(i,state){
map[state.stateName] = state;
states.push(state.stateName);
});
process(states);
},
highlighter: function(item) {
for (var prop in data) {
if(data[prop].stateName === item){
html = '<li><img class="thumbnail" src="' + data[prop].image + '">' + data[prop].stateName + '<span class="small"> ' + data[prop].stateCode + '</span></li>';
}
}
return html;
}
});
</script>
</body>
</html>
@gvost
Copy link
Author

gvost commented Aug 19, 2015

I am seeing the output html on this seems a bit janky, but I can't seem to figure out where it is being created, how to change the structure with overrides or even just change the classes.

<ul class="typeahead dropdown-menu" style="top: 110px; left: 49.5454521179199px;  display: none;">
    <li data-value="Illinois" class="">
        <a href="#">
            <li class="active">
                <img class="thumbnail" src="images/il.jpg">Illinois<span class="small"> IL</span>
            </li>
        </a>
    </li>
    <li data-value="California">
        <a href="#">
            <li>
                <img class="thumbnail" src="images/ca.jpg">California<span class="small"> CA</span>
            </li>
        </a>
    </li>
    <li data-value="Arizona">
        <a href="#">
            <li>
                <img class="thumbnail" src="images/az.jpg">Arizona<span class="small"> AZ</span>
            </li>
        </a>
    </li>
</ul>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment