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

Cupidity

you want the auto complete search results to show in a separate div? Got a solution for this already? – Ursine

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

Contort

This does not appear to work, at least not in any current (0.10.x) version... menu is not an option, just a local variable, and always gets created as a hidden div (dropdown). – Effervesce

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

    }
});

Wein

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

Archibold