javascript - 禁用按钮，除非从预先输入自动完成中选择

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>

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

谁能帮帮我吗？

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