Bootstrap typeahead results into a div, possible?

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'});