CODEWITHSUNDEEP
javascriptjquerytypeahead.js
Ram
Ram

Reputation: 87

Disable Submit Button if results empty typeahead.js

I want my submit button to be disabled if there are no results found for the query. Form should not submit in this case. I am using typeahead.js. This is the code i am using

$('.typeahead').typeahead(null, {
        name: 'suburb',
        displayKey: 'suburb_name',
        limit: 10,
        source: suburb.ttAdapter(),
        templates: {
            empty: [
                '<div class="empty-message">',
                'No results Found',
                '</div>'
                ].join('\n'),
            suggestion: function (s){return '<p>'+s.postal_code+', '+s.suburb_name+'</p>';}
        }
    });

Upvotes: 0

Views: 947

Answers (2)

novalis78
novalis78

Reputation: 71

You could look for your .empty-message class and trigger jQuery when your element is being inserted into the DOM.

$(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).is('.empty-message')) {
       $("#myFormBtn").attr("disabled","disabled");
    }
});

Upvotes: 1

SSA
SSA

Reputation: 5493

There is no direct event on typeahead API when source returns empty. Just an idea, you can initially disable the button and enable the button when value from typeahead is selected by making use of typeahead:selected and autocompleted events.

Documentation of custom event is here

$('.typeahead').on('typeahead:selected', enableSubmit); 
$('.typeahead').on('typeahead:autocompleted', enableSubmit);


function enableSubmit(){

      //This will trigger when something is selected from typeahead
      //Enable the button here

}

Upvotes: 2

Related Questions