Bootstrap typeahead results into a div, possible? - typeahead

Question

I'm trying to fit typeahead results into a particular div on my page. I get the JSON callback data but I don't know how to use it in order to populate a particular div. The process function has the only effect of listing the results, whatever the length it takes, just under the search field.
Here is my code, do you know how to exploit the callback data in order to populate a particular div ?
$('#search').typeahead({
source: function(query, process) {
$.ajax({
url: '/action/search.php?action=autocomplete',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
//process(data);
},
minLength: 1
});
}
});

Answer 1

There is actually a really simple way to get the results into a specific page element, however, I'm not sure it's actually documented.
Searching through the source code shows that the option menu can be passed in, which seems to be intended to allow you to define what the wrapping menu element will look like, however, you can pass in a selector, and it will use this as the target.
Given the html fragment:
<input id='#typeahead' type='text'>
<h2>Results</h2>
<ul id="typeahead-target"></ul>
You could use the following to get the results to appear within the ul element:
$('#typeahead').typeahead({menu: '#typeahead-target'});

Answer 2

I had exact issue. I have written detailed article about the same.
go through the article : http://www.wrapcode.com/bootstrap/typeahead-json-objects/
When you click on particular result from search query results. You can use updater function to populate data with selected JSON object values..
$("#typeahead").typeahead({
updater: function(item){
//logic on selected item here.. e.g. append it to div in html
return item;
}
});
Use this function :
$("#typeahead").typeahead({
source: function (query, process) {
var jsonObj = //PARSED JSON DATA
states = [];
map = {};
$.each(jsonObj, function (i, state) {
map[state.KeyName] = state;
states.push(state.KeyName); //from JSON Key value pair e.g. Name: "Rahul", 'Name' is key in this case
});
process(states);
},
updater:function (item) {
$('#divID').html(" " + map[item].KeyName); //from JSON Key value pair
return item;
// set more fields
}
});

Answer 3

first create css class named .hide {display:none;}
$(typeahead class or id name).typeahead(
{
hint: false,
highlight: true,
minLength: 1,
classNames: {
menu: 'hide' // add class name to menu so default dropdown does not show
}
},{
name: 'names',
display: 'name',
source: names,
templates: {
suggestion: function (hints) {
return hints.name;
}
}
}
);
$(typeahead class or id name).on('typeahead:render', function (e, datum)
{
//empty suggestion div that you going to display all your result
$(suggestion div id or class name').empty();
var suggestions = Array.prototype.slice.call(arguments, 1);
if(suggestions.length){
for(var i = 0; i < suggestions.length; i++){
$('#result').append(liveSearch.template(
suggestions[i].name,
suggestions[i].id));
}
}else{
$('#result').append('<div><h1>Nothing found</h1></div>');
}
});