Multiple sources/JSON Object?

jacobkossman commented 10 years ago

I'm wondering if there is a way to call the source with a json object with key value pairs? So that when you search the key will show up next to the value?

For example I have a set of movies and I want to be able to search actors, movie titles, and directors so I can pull all of these lists together with the appropriate key name ("movie","actor","director") and have it show next to the value in the dropdown?

Is this possible? I've tried to get it to accept JSON key value (and the json validates) but no luck.

bassjobsen commented 10 years ago

Hi @jkingaround,

Thanks for your question. I think it will be better to ask how to question on stackoverflow. Please also read https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/33#issuecomment-38047656. Does that answer your question?

jacobkossman commented 10 years ago

That helps with the object part. However, how can i get the age of the person to show up in the dropdown?

Thanks for the prompt reply! :)

bassjobsen commented 10 years ago

Well, please consider the the complete example code below.

The source function can return array's of strings with newData.push(object.name + ',(age:' + object.age + ')');. When doing so the key / value relation will be lost. I add a keys array to store this key / value relation. The keys array can be used to update an other form field (key) which holds the key. The form field with the name key can be set to hidden.

<!DOCTYPE html>
<html>
<head>
<title>bootstrap3-typeahead.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap3/bootstrap-master/dist/css/bootstrap.css" rel="stylesheet">
</head> 
<body>
<input type="text" name="key" class="col-xs-3" /><br>   
<input type="text" class="typeahead col-xs-3" />  
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.min.js"></script>  
<script src="/typeahead/bootstrap3-typeahead.js"></script>  
<script>
var persons;
var keys = [];   
$('.typeahead').typeahead(
{
items: 4,
source: function (query, process) {

persons = {
kiki : { name: 'Kiki',age: 6},
dries : { name: 'Dries',age: 4},
wolf : { name: 'Wolf',age: 2},
leny : { name: 'Leny',age: 0}
}
var newData = [];
$.each(persons,function(index, object){
keys[object.name + ',(age:' + object.age + ')']= index;
newData.push(object.name + ',(age:' + object.age + ')');
});
return newData;   
},
updater: function(item){
$('input[name="key"]').val(keys[item]);
return item;
}
});
</script>   
</body>
</html>

jacobkossman commented 10 years ago

Thank you so much. Just as an fyi for anyone reading this, it does accept normal json array objects without the "name : " in front.

Cheers.

bassjobsen / Bootstrap-3-Typeahead

Multiple sources/JSON Object? #43