How to catch event when typeahead bloodhound remote returns zero results

问题

I'm using twitter typeahead with bloodhound suggestion engine, everything is working fine. Below is my code snippet

// instantiate the bloodhound suggestion engine
     var searchData = new Bloodhound({
            datumTokenizer: function(d) { 
                return Bloodhound.tokenizers.whitespace(d.value);
            },            
            queryTokenizer: Bloodhound.tokenizers.whitespace,        
            remote: {
            url: '<?php echo 'http://localhost/project1/perform/find?q=%QUERY'; ?>',
               filter: function (data) {
                    return $.map(data.results, function (record) {
                        return {
                            title: record.title,
                            pageURL: record.pageURL
                        };
                    });
                }
            }  
        });

        // initialize the bloodhound suggestion engine 
        searchData.initialize();
        searchData.clearRemoteCache();             

        // instantiate the typeahead UI
        $('#find').typeahead({        
            hint:false,
            highlight: true,
            minLength: 3
            }, {
            name:'search-data',
            displayKey: 'title',
            source: searchData.ttAdapter(),            
            templates: { 
             empty:[
               '<strong>No Results Found.</strong>'
             ],
             suggestion: Handlebars.compile('<p>{{title}}</p>')
           }   
        }).on('typeahead:selected', function (e, suggestion) {  
            setTimeout(function(){document.location = suggestion.pageURL;}, 500);
        }).on('typeahead:closed', function (e){
          $loadingImg.hide();
       });

I want to do some operations like displaying posting button, etc., when remote server returns zero results, how can I catch this event ?

回答1:

I don't know whether following approach is correct ( correct me if wrong )

        filter: function (data) {
             if(data.results.length){   
               console.log('results found'); //do something
              }else{
                console.log('results not found'); //do something
              }

            return $.map(data.results, function (record) {
                    return {
                        title: record.title,
                        pageURL: record.pageURL
                    };
                });
            }

回答2:

I used the typeahead notFound 'template' option, from there i could set a link button which for me is more accesible/usable in my case. Typeahead settings:

$('#remote .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
  },
  {
    name: 'sn-tags',
    display: 'tag',
    source: oBusqTags, //Bloodhound object
    templates: {
      notFound: '<p>No matches<br><a id="btnAddNewTag" href="#">Add New Tag</a></p>'
    }
}).bind("typeahead:select", function(obj, datum, name) {
  //add selection as an option on a select element
  $('#lbxAddTag').append($('<option>', {
    value: datum.id,
    text: datum.tag
  }));
});

This is the listener for that link:

$('#remote').on('click', '#btnAddNewTag', function(e){
    $('#lbxAddTag').append($('<option>', {
        value: "0",
        // this is tricky, as there aren't any matches then 
        // $('#remote .typeahead').typeahead('val') contains '', 
        // so i had to set an id for the typeahead input text box and 
        // 'manually' get its value
        text: $('#tbxBusqTag').val()
    }));
    // as the text is already added as a select option
    // i clean the typeahead input box
    $('#remote .typeahead').typeahead('val','');
    e.preventDefault();
});

来源：https://stackoverflow.com/questions/25302888/how-to-catch-event-when-typeahead-bloodhound-remote-returns-zero-results

标签

jquery

typeahead.js

bootstrap-typeahead

bloodhound