5

I'm using bloodhound as suggestion engine for typeahead.

The problem is that when I use the remote source in bloodhound. It makes the queries and take the results but when I search through the results nothing's returned.

More specifically this code works just fine:

    categoryEngine = new Bloodhound({                                                                                                                                                                          
        queryTokenizer: Bloodhound.tokenizers.whitespace,                                                                                                                                                      
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),                                                                                                                                         
        local: [{                                                                                                                                                                                              
            id: 1,                                                                                                                                                                                             
            title: 'Pizza'                                                                                                                                                                                     
        },                                                                                                                                                                                                     
        {                                                                                                                                                                                                      
            id: 2,                                                                                                                                                                                             
            title: 'Pasta'                                                                                                                                                                                     
        }                                                                                                                                                                                                      
        ]                                                                                                                                                                                                      
    });                                                                                                                                                                                                        
    categoryEngine.initialize();                                                                                                                                                                               
    categoryEngine.search('Pi', function(s) {                                                                                                                                                                  
        console.log('food='+JSON.stringify(s));                                                                                                                                                                
    });   

and it logs food=[{"id":1,"title":"Pizza"}] in the console which is correct. But this one with the remote source:

    categoryEngine = new Bloodhound({                                                                                                                                                                          
        queryTokenizer: Bloodhound.tokenizers.whitespace,                                                                                                                                                      
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),                                                                                                                                         
        remote: {                                                                                                                                                                                              
           url: '/complete/category_title/%QUERY',                                                                                                                      
            wildcard: '%QUERY'                                                                                                                                                                                 
        }                                                                                                                                                                                                      
    });                                                                                                                                                                                                        
    categoryEngine.initialize();                                                                                                                                                                               
    categoryEngine.search('Pi', function(s) {                                                                                                                                                                  
        console.log('food='+JSON.stringify(s));                                                                                                                                                                
    });

Makes a request to the server:

GET /complete/category_title/Pi HTTP/1.1
Host: XXXXX
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Referer: YYYYY
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,fa;q=0.6
Cookie: PHPSESSID=ZZZZZ

and takes this response:

HTTP/1.1 200 OK
Host: XXXXX
Connection: close
X-Powered-By: PHP/5.6.8
Cache-Control: no-cache
Date: Sun, 10 May 2015 14:24:22 GMT
Content-Type: application/json

[{"id":13,"title":"Pizza"}]

Which also seems correct, but the search method is not working and the debugging line prints food=[] in the console as it returns no results.

I'm using these libraries:

  • jQuery v1.11.2
  • jQuery Migrate v1.2.1
  • jQuery UI v1.11.2
  • Bootstrap v3.3.1
  • Typeahead v0.11.1
mdh.heydari
  • 540
  • 5
  • 13

1 Answers1

2

By the look of it, the problem is that Bloodhound.search returns async (remote) results in the 2nd callback (3rd parameter) (Bloodhound.search). You should change your code to:

var cb = function(s) {console.log('food='+JSON.stringify(s));};
categoryEngine.search('Pi', cb, cb);
Amit
  • 45,440
  • 9
  • 78
  • 110
  • Thanks, It works! I used the suggestion engine with typeahead and gave it categoryEngine.ttAdapter() as its source, though same issue happened. I can use this method and write the typeahead's source function by myself. But the code will be an ugly one and It's a question for me that how [this example](https://twitter.github.io/typeahead.js/examples/#remote) works but mine doesn't? – mdh.heydari May 12 '15 at 16:30
  • Hi @amit I'm having the same issue while working on one of the legacy codes. However, the accepted answer does not seem to work for me. Can you possibly share any examples? – curiousCat Nov 14 '22 at 02:02