Question

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

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

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

---结束编辑---

我使用下面的代码让用户从Typeahead，Bloodhound生成的下拉列表中选择值。

onCreate()

这是HTML：

$(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'
                        }
                });
            });

我想确保触发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

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

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

注意：这是经过解析的coffeescript，但我认为应该相当清楚发生了什么。

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

3 个答案: