Disable button unless Selected from Typeahead Autocomplete

Question

--- EDIT: Explaining the Flow ---

In the input field, the user is supposed to enter any string which is basically the name of a company they are searching for. Once the user has entered 3 or more characters, an AJAX call goes to the database, and fetches results matching the users query and displays them like search suggestions in Google or your browser URL bar. One the user selects an item from the suggestions, and clicks on the button, a function called setCompany() is triggered which performs different actions.

What I want is that the button which triggers further actions based on the search query, should be disabled UNTIL the user selects an item from the suggestions that Bloodhound, Typeahead has come up with.

--- End EDIT ---

I am using the code below to enable user to select values from the dropdown list that is generated by Typeahead, Bloodhound.

$(document).ready(function() {
        //Set up "Bloodhound" Options       
                var my_Suggestion_class = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('keyword'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: "{{ URL::to('user/company/%compquery') }}",
                        filter: function(x) {
                            return $.map(x, function(item) {
                                return {keyword: item['name']};
                            });
                        },
                        wildcard: "%compquery"
                    }
                });

                // Initialize Typeahead with Parameters
                my_Suggestion_class.initialize();
                var typeahead_elem = $('.typeahead');
                typeahead_elem.typeahead({
                    hint: false,
                    highlight: true,
                    minLength: 3
                },
                {
                    // `ttAdapter` wraps the suggestion engine in an adapter that
                    // is compatible with the typeahead jQuery plugin
                    name: 'results',
                    displayKey: 'keyword',
                    source: my_Suggestion_class.ttAdapter(),
                    templates: {
                          empty: 'No Results'
                        }
                });
            });

Here is the HTML:

<div class="iner-sub-header" style="border-bottom: 1px solid #ccc;">
                <div class="row" style = "background-color: white;">
                    <div class="col-md-12 heading">
                        <div id = "results" class="col-md-12 col-xs-12 results">
                            <span class="glyphicon glyphicon-search span-search" aria-hidden="true"></span>
                            <input type="search" class="typeahead custom-input-padding" placeholder="Search Company" id="keyword" onselect="setCompany();">
                            <button class="btn go-btn" id="go" onclick="setCompany()">SEARCH</button>
                        </div>
                    </div>
                </div>
            </div>

I want to make sure that the button that will trigger setCompany() funtion is disabled until the user selects something from the dropdown that is generated by Typeahead.

Can anyone please help me out?

Answer 1

I wanted a way to re-disable the button if the button if the textbox's content changes and isn't a typeahead selected value. On typeahead:select I store the display text. On every key up I ensure the text still matches the stored variable. Otherwise I disable the button again.

    this.searchbox = $('.js-patient-search');

    this.searchbox.typeahead({
      hint: true
    }, {
      source: Bloodhound,
      display: function(obj) {
        return obj.first_name + ' ' + obj.last_name;
      }
    });

    this.searchbox.on('typeahead:select', (function(_this) {
      return function(e, suggestion) {
        _this.displayName = _this.searchbox.val();
        return $('.js-add-encounter').prop('disabled', false);
      };
    })(this));

    return this.searchbox.keyup((function(_this) {
      return function(e) {
        if (_this.searchbox.val() !== _this.displayName) {
          return $('.js-add-encounter').prop('disabled', true);
        }
      };
    })(this));

NOTE: This is parsed coffeescript but I think it should be fairly clear what's going on.

Answer 2

This made it work for me. Now its working perfectly.

$(document).ready(function() {
        //Set up "Bloodhound" Options       
                var my_Suggestion_class = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('keyword'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: "{{ URL::to('user/company/%compquery') }}",
                        filter: function(x) {
                            return $.map(x, function(item) {
                                return {keyword: item['name']};
                            });
                        },
                        wildcard: "%compquery"
                    }
                });

                // Initialize Typeahead with Parameters
                my_Suggestion_class.initialize();
                var typeahead_elem = $('.typeahead');

                typeahead_elem.typeahead({
                    hint: false,
                    highlight: true,
                    minLength: 3
                },
                {
                    // `ttAdapter` wraps the suggestion engine in an adapter that
                    // is compatible with the typeahead jQuery plugin
                    name: 'results',
                    displayKey: 'keyword',
                    source: my_Suggestion_class.ttAdapter(),
                    templates: {
                          empty: 'No Results'
                        }
                }).on("typeahead:selected typeahead:autocompleted", function(ev, my_Suggestion_class) {
                    $("#go").prop("disabled", false);
                });
             });

Answer 3

Try

html

<button class="btn go-btn" id="go" onclick="setCompany()" disabled="true">SEARCH</button>

js

 typeahead_elem.bind("typeahead:select", function(ev, suggestion) {
    $("#go").prop("disabled", false);
 });

See disabled , typeahead.js - Custom Events