CODEWITHSUNDEEP
typeaheadbootstrap-typeahead
Xavier C.
Xavier C.

Reputation: 1817

Bootstrap typeahead results into a div, possible?

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

Upvotes: 6

Views: 4864

Answers (3)

James Norman
James Norman

Reputation: 515

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

Upvotes: 2

Matthew Schinckel
Matthew Schinckel

Reputation: 35619

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

Upvotes: 6

Rahul
Rahul

Reputation: 5774

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

    }
});

Upvotes: 2

Related Questions