Using Twitter Typeahead in ASP.net MVC
After hours spent just getting Twitter formatted text to display autocomplete values, I'm having a hard time figuring out how to replace all dropdownlists in Create and Edit actions in my controller.
There are a couple of issues that I know about stock. First, how to pass the id (key) of the selected object in typeahead.My JSON has a Key value which is basically the ID value and a Value which is the object name. JSON can be seen below.
[{"Key":1,"Value":"Test1"},{"Key":2,"Value":"Test2)"},{"Key":4,"Value":"Adagreb d.o.o."},{"Key":5,"Value":"AGB Nielsen."}]
After receiving and converting the JSON to an array of Javascript objects, the data is passed to the control, which should display autocomplete (typeahead).
var substringMatcher = function (strs) {
//ommited for brevity
};
function getJson(url) {
//ommited for brevity
}
function simpleArray(target) {
var arr = [];
$.each(target, function (i, e) {
$.each(e, function (key, val) {
arr.push(val);
console.log(val + "-" + key);
});
});
return arr;
}
function typeaheadSetup(control, data) {
$(control).typeahead({
hint: true,
highlight: true,
minLength: 2
}, {
displayKey: 'value',
source: substringMatcher(simpleArray(data))
});
}
var companies = getJson('/Ticket/GetCompanies');
typeaheadSetup('#idFirma', companies);
My question is how to pass the ID (Key) when displaying the value (Value) and also store it by passing the model to the database.
source to share
We have to use Bloodhound
ttAdapter
one that comes from a set of types and can grab the selected clause element from the event typeahead:selected
.
Below is the script for your reference:
TestCase # 1 with Local Dataset Working Fiddle
<label for="company_search">Company Search:</label>
<input id="company_search" type="text" class="typeahead" />
<div id="selectedCompany"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/0.10.4/typeahead.bundle.js"></script>
<script>
$(function () {
var $SelectedCompany = $('#selectedCompany').hide(),
companyList = [{"Key":1,"Value":"Test1"},{"Key":2,"Value":"Test2)"},{"Key":4,"Value":"Adagreb d.o.o."},{"Key":5,"Value":"AGB Nielsen."}];
var companies = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: companyList
//,prefetch: '/path/to/prefetch'
//,remote: {/* You can use this for ajax call*/ }
});
companies.initialize();
$('#company_search').typeahead({ highlight: true, minLength: 2 }, {
name: 'companies', displayKey: 'Value', source: companies.ttAdapter()
})
.on("typeahead:selected", function (obj, company) {
$SelectedCompany.html("Selected Company: " + JSON.stringify(company)).show();
});
});
</script>
Edit:
TestCase # 2 with remote dataset Working fiddle
<input class="typeahead" placeholder="Type here to Search Movie..."></input>
<div id="selectedSuggestion"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/0.10.4/typeahead.bundle.js"></script>
<script>
$(function () {
//Docs: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote
var $SelectedSuggestion = $('#selectedSuggestion').hide(),
movies = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
filter: function (movies) {
return movies.results;
}
}
});
// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'title',
source: movies.ttAdapter()
})
.on("typeahead:selected", function (obj, selectedItem) {
$SelectedSuggestion.html("Selected Suggestion Item: " + JSON.stringify(selectedItem)).show();
});
});
</script>
source to share