Categories

[asnoba]

Hi,

This looks like a really nice upgrade to Bootstrap Typeahead. Is there a way to use categories similar to jQuery UI's Autocomplete: http://jqueryui.com/demos/autocomplete/#categories. I.e. grouping search results by 'People', 'Posts', 'Events' etc.

Cheers, Asger

[tcrosen]

I added that feature for a client but it was a trimmed down version (eg. no markup, Ajax, etc). Eventually I will add it to the open source version but it's a bit more work to make it work with the data- API.

[DeluxZ]

+1

[tcrosen]

On it's way in 2.0

[Shadowfiend]

Did this actually make it into 2.0?

[ericgrande]

I am curios as well if grouping results is ready yet

[pushpinderbagga]

@tcrosen - kept watching this thread for your version 2.0 since 5 months and was a little sad that you forgot to include the categories - so I made it myself.

Shall upload the code soon somwhere.

[denghongcai]

@pushpinderbagga hope for your code!

[JakubJarabica]

@pushpinderbagga +1 for your code! Would appreciate pingback as well ;)

[kentkobi]

@pushpinderbagga +1 for grouping - your screenshot is almost exactly what I'm looking for

[pushpinderbagga]

Hello folks, its just a dirty implementation and nothing exclusive. I am trying to improve it so it isnt a disgrace to the original version and as soon as I am done - shall post the code here itself - very very soon (lets say a week). Cheers!

[tcrosen]

Hi everyone, I must apologize I've been insanely busy in my personal life and work life as well. I wrote a Typeahead that includes groups/categories a while ago. While it's not perfect nor is it a direct branch of the original, I've made it available in a branch of this repo. It has a working demo so at the very least it should help you with your code if you're trying to make modifications.

Also I'd suggest looking at the new Typeahead from Twitter which I haven't had a chance to explore myself but its being marketed as an "advanced" version of the original Bootstrap one.

Again my apologies for not keeping up with this plugin.

[denghongcai]

@tcrosen I find the new Typeahead from Twitter is perfect!!

[tarunks]

Hi @tcrosen , I am not able to use the category typeahead using ajax call. can you please provide a demo for that

Given below the code I am using, can you please guide what is the issue

My code is a JS is as follows

$("#item1).typeahead({
            source: function( request, response ) {
                $.ajax({
                  url: "http://localhost:8080/demo/search?query=" + obj.val(),
                  dataType: "json",
                  type: "GET",
                  success: function(data) {
                if (data !== null) {
                    alert(data);
                    $(data.elementlist).each(function(i, d) {
                        var el = {};
                        el.id = i + 1;
                        el.name = d.category;
                        var iele = [];
                        $(d.element).each(function(j, elem) {
                            var iel = {};
                            // debugger;
                            iel.id = ctr;
                            if (elem.name) {
                                iel.name = elem.name;
                            } else {
                                iel.name = elem.title;
                            }
                            iele.push(iel);
                            ctr++;
                        });
                        el.items = iele;
                        ele.push(el);
                    });
                    // console.log(ele);

                }
                return ele;
            }
                    }));
                  }
                });
              }

JSON result got after ajax is as given below

     {
       "elementlist": [
          {
            "element": [
            {

                "id": "286405",                   
                "title": "316 ALEMEDA DR",
                "url": "as=12099f94324f42157"
            },
            {

                "id": "286403",                    
                "title": "3549 ALMAR RD",
                "url": "as=12099f93b74aa6ea7"
            },
            {

                "id": "286129",                   
                "title": "1029 ALLENDALE RD",
                "url": "as=12099f173959e7877"
            },
            {
                "term": [
                    "138",
                    "alcazar",
                    "st"
                ],
                "ccode": "2",
                "id": "285797",
                "igdid": "12099f3e68288febd",
                "score": "1.0E-7",
                "timestamp": "1370340203594",
                "title": "138 ALCAZAR ST",
                "url": "as=12099f3e68288febd"
            },
            {

                "id": "285768",                   
                "title": "381 ALHAMBRA PL",
                "url": "as=12099f665c6139d36"
            }
        ],
        "category": "Address"
    },
    {
        "element": [
            {

                "id": "365307",                   
                "name": "1061 KELSEY AVE",                  
                "title": "ALBERTORIO LEDINA",
                "url": "as=12117b15d4a5fe81c"
            },
            {

                "id": "365485",                    
                "name": "100 RANDON TER",                  
                "title": "KARIM ALTAF",
                "url": "as=12117a8622fb22839"
            },
            {

                "id": "365490",
                "name": "1001 CHESTERFIELD CIR",
                "title": "PATRICK ALLEN & BRENDA",
                "url": "as=12117cdbc847aa3df"
            }
        ],
        "category": "Name"
    },
    {
        "element": [
            {
                "id": "397259",
                "title": "Alachua 32615",
                "url": "zs=32615"
            },
            {
                "id": "397248",
                "title": "Alachua 32609",
                "url": "zs=32609"
            }
        ],
        "category": "Zip"
    }
  ]
 }