I must be an idiot. I am using the Typeahead.js plugin. I am trying to use custom templates for suggestions. While my custom templates appear, I cannot use the arrow-keys to actually select an item. If I hover over an item, the selection doesn't get highlighted either. I thought it might be just a styling issue. However, if 3 suggestions appear, and I click the down arrow twice, then enter, my selected option does not appear in the text box. Alternatively, if I choose an option with my mouse, the option does not appear in the box.
What am I doing wrong? Currently, I have the following:
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/suggests?querytext=%QUERY',
filter: function(results) {
return $.map(results.Results, function(suggestion) {
return suggestion;
});
}
});
suggestions.initialize();
$(document).ready(function() {
$('input.typeahead').typeahead(
{ minLength: 3 },
{
name: 'suggestions',
source: suggestions.ttAdapter(),
templates: {
suggestion: function(data) {
var str = '';
if (data.Type === 'Customer') {
str += '<i class="icon-1"></i>';
} else if (data.Type === 'Product') {
str += '<i class="icon-2"></i>';
}
str += '<div>' + data.Name + '</div>';
return str;
}
}
}
);
});
The suggestions popup. The results come from the following JSON:
{
"Results":[
{
"Type":"Customer",
"Id":5,
"Name":"Bill",
"LastUpdated":"01-01-2015"
},
{
"Type":"Customer",
"Id":135,
"Name":"Billows",
"LastUpdated":"01-02-2015",
},
{
"Type":"Product",
"Id":241,
"Name":"Bill Check",
"LastUpdate":"01-04-2015"
}
],
"TotalResults":3,
"TotalCustomers":2,
"TotalProducts":1
}
How do I a) Apply a highlight to an item when a use hovers over an item with the mouse or uses the arrow keys to get to it b) Put the select item's Name value in the input box when the suggestion is selected?
Thanks!
Try
$(function () {
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/suggests?querytext=%QUERY',
filter: function(results) {
return $.map(results.Results, function(suggestion) {
return {value:suggestion.Name, suggest:suggestion};
});
}
});
suggestions.initialize();
$("#bloodhound .typeahead").typeahead({
minLength: 3,
hint: true,
highlight: true
}, {
name: 'suggestions',
displayKey: 'value',
templates: {
suggestion: function(data) {
var str = '';
if (data.suggest.Type === 'Customer') {
str += '<i class="icon-1">' + data.suggest.Type + '</i>';
} else if (data.suggest.Type === 'Product') {
str += '<i class="icon-2">' + data.suggest.Type + '</i>';
}
str += '<div>' + data.value + '</div>';
return str;
}
},
source: suggestions.ttAdapter()
});
})
$(function () {
var data = {
"Results":[
{
"Type":"Customer",
"Id":5,
"Name":"Bill",
"LastUpdated":"01-01-2015"
},
{
"Type":"Customer",
"Id":135,
"Name":"Billows",
"LastUpdated":"01-02-2015",
},
{
"Type":"Product",
"Id":241,
"Name":"Bill Check",
"LastUpdate":"01-04-2015"
}
],
"TotalResults":3,
"TotalCustomers":2,
"TotalProducts":1
};
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(data.Results, function(d) {
return {value:d.Name, suggest:d}
})
});
suggestions.initialize();
$("#bloodhound .typeahead").typeahead({
minLength: 3,
hint: true,
highlight: true
}, {
name: 'suggestions',
displayKey: 'value',
templates: {
suggestion: function(data) {
var str = '';
if (data.suggest.Type === 'Customer') {
str += '<i class="icon-1">'+data.suggest.Type+'</i>';
} else if (data.suggest.Type === 'Product') {
str += '<i class="icon-2">'+data.suggest.Type+'</i>';
}
str += '<div>' + data.value + '</div>';
return str;
}
},
source: suggestions.ttAdapter()
});
})
@font-face {
font-family:"Prociono";
src: url("../font/Prociono-Regular-webfont.ttf");
}
html {
overflow-y: scroll;
}
.container {
margin: 0 auto;
max-width: 750px;
text-align: center;
}
.tt-dropdown-menu, .gist {
text-align: left;
}
html {
color: #333333;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.2;
}
.title, .example-name {
font-family: Prociono;
}
p {
margin: 0 0 10px;
}
.title {
font-size: 64px;
margin: 20px 0 0;
}
.example {
padding: 30px 0;
}
.example-name {
font-size: 32px;
margin: 20px 0;
}
.demo {
margin: 50px 0;
position: relative;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 18px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
.gist {
font-size: 14px;
}
.example-twitter-oss .tt-suggestion {
padding: 8px 20px;
}
.example-twitter-oss .tt-suggestion + .tt-suggestion {
border-top: 1px solid #CCCCCC;
}
.example-twitter-oss .repo-language {
float: right;
font-style: italic;
}
.example-twitter-oss .repo-name {
font-weight: bold;
}
.example-twitter-oss .repo-description {
font-size: 14px;
}
.example-sports .league-name {
border-bottom: 1px solid #CCCCCC;
margin: 0 20px 5px;
padding: 3px 0;
}
.example-arabic .tt-dropdown-menu {
text-align: right;
}
[class|=icon] {
color:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="Customers and Products" />
</div>
Have you tried adding a valueKey to your function pointing it to name? See SO answer here:
Typeahead.js does give me suggestions but doesn't select them
