Geek asks and answers

Are botstrap results possible in a div?

I am trying to fit typeahead results into a separate div on my page. I get JSON callback data, but I don't know how to use it to populate a specific div. The function of the process has the only effect of listing the results, regardless of the length it takes, only under the search field.

Here is my code, do you know how to use callback data to populate a specific 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
              });
          }
    });
+5
source share
3 answers

There is actually an easy way to get results in a specific page element, however, I'm not sure if it is really documented.

, menu, , , , , , , .

html-:

<input id='#typeahead' type='text'>

<h2>Results</h2>
<ul id="typeahead-target"></ul>

ul :

$('#typeahead').typeahead({menu: '#typeahead-target'});
+4

. .

: http://www.wrapcode.com/bootstrap/typeahead-json-objects/

. updater JSON.

$("#typeahead").typeahead({
   updater: function(item){
   //logic on selected item here.. e.g. append it to div in html
   return item;
   }
});

:

$("#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

    }
});
+1

css .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>');
        }
    });
+1

More articles:


All Articles