找到你要的答案

Q:Disable button unless Selected from Typeahead Autocomplete

Q:除非禁用按钮选择typeahead自动完成

--- 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?

编辑:解释流程---

在输入字段中,用户应该输入任何基本上是他们正在搜索的公司名称的字符串。一旦用户输入3个字符,一个Ajax调用到数据库,获取匹配用户的查询结果并显示像谷歌或你的浏览器地址栏搜索建议。一个用户选择的建议项,并点击按钮,一个功能叫做setcompany()触发执行不同的动作。

我要的是这个按钮触发基于搜索查询的进一步行动,应禁用,直到用户选择从猎犬的建议项目,Typeahead想出了。

---结束编辑---

我用下面的代码允许用户从下拉列表中选择值所产生的typeahead,猎犬。

$(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东西。

有谁能帮我吗?

answer1: 回答1:

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

尝试

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

看到残疾人,typeahead.js -自定义事件

answer2: 回答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);
                });
             });

这使它为我工作。现在它工作完美。

$(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);
                });
             });
answer3: 回答3:

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.

我想了一个办法重新禁用按钮,如果按钮如果文本框中的内容的变化和不typeahead选择值。在typeahead:选择我店的显示文本。在每一个键上,我确保文本仍然匹配存储的变量。否则我再次禁用按钮。

    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的但我想应该很清楚到底发生了什么。

javascript  jquery  html  typeahead