除非从 Typeahead Autocomplete 中选择，否则禁用按钮

Question

--- 编辑：解释流程---

在输入字段中，用户应该输入任何字符串，基本上是他们正在搜索的公司的名称。一旦用户输入了 3 个或更多字符，AJAX 调用就会进入数据库，并获取与用户查询匹配的结果，并将其显示为 Google 或浏览器 URL 栏中的搜索建议。用户从建议中选择一个项目，然后单击按钮，会触发一个名为 setCompany() 的函数，该函数执行不同的操作。

我想要的是，应该禁用根据搜索查询触发进一步操作的按钮，直到用户从 Bloodhound，Typeahead 提出的建议中选择一个项目。

--- 结束编辑 ---

我正在使用下面的代码使用户能够从 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'
                        }
                });
            });

这是 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>

我想确保触发 setCompany() 函数的按钮被禁用，直到用户从 Typeahead 生成的下拉列表中选择某些内容。

谁能帮帮我？

Answer 1

试试

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);
 });

见disabled，typeahead.js - Custom Events

Answer 2

这使它对我有用。现在它工作得很好。

$(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

如果按钮的文本框的内容发生更改并且不是预先输入的选定值，我想要一种方法来重新禁用按钮。在 typeahead:select 我存储显示文本。在每个按键上，我确保文本仍然与存储的变量匹配。否则我会再次禁用该按钮。

    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));

注意：这是已解析的咖啡脚本，但我认为应该很清楚发生了什么。