Question

我正在尝试使用twitter的typeahead来自动填充国家/地区列表，但是当我开始输入时没有任何反应：

以下是自我调用功能。

var Countries = function() {

var typeAheadCDN = "https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js";

var countryList = [
                'Afghanistan','Albania','Algeria','American Samoa','Andorra','Angola','Anguilla','Antigua and Barbuda','Argentina','Armenia','Aruba','Australia','Austria','Azerbaijan',
                'The Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bermuda','Bhutan','Bolivia','Bosnia and Herzegovina','Botswana','Brazil','British Virgin Islands',
                'Brunei','Bulgaria','Burkina Faso','Burundi','Cambodia','Cameroon','Canada','Cape Verde','Cayman Islands','Central African Republic','Chad','Chile','China','Christmas Island',
                'Cocos Islands','Colombia','Comoros','Cook Islands','Costa Rica','Côte d\'Ivoire','Croatia','Cuba','Curaçao','Cyprus','Czech Republic','Democratic Republic of the Congo',
                'Denmark','Djibouti','Dominica','Dominican Republic','East Timor','Ecuador','Egypt','El Salvador','Equatorial Guinea','Eritrea','Estonia','Ethiopia','Falkland Islands',
                'Faroe Islands','Fiji','Finland','France','French Guiana','French Polynesia','Gabon','The Gambia','Georgia','Germany','Ghana','Gibraltar','Greece','Greenland','Grenada',
                'Guadeloupe','Guam','Guatemala','Guernsey','Guinea','Guinea-Bissau','Guyana','Haiti','Honduras','Hong Kong','Hungary','Iceland','India','Indonesia','Iran','Iraq','Ireland',
                'Isle of Man','Israel','Italy','Jamaica','Japan','Jersey','Jordan','Kazakhstan','Kenya','Kiribati','Kosovo','Kuwait','Kyrgyzstan','Laos','Latvia','Lebanon','Lesotho','Liberia',
                'Libya','Liechtenstein','Lithuania','Luxembourg','Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Marshall Islands','Martinique','Mauritania','Mauritius',
                'Mayotte','Mexico','Federated States of Micronesia','Moldova','Monaco','Mongolia','Montenegro','Montserrat','Morocco','Mozambique','Myanmar','Nagorno-Karabakh','Namibia','Nauru',
                'Nepal','Netherlands','New Caledonia','New Zealand','Nicaragua','Niger','Nigeria','Niue','Norfolk Island','North Korea','Northern Cyprus','Northern Mariana Islands','Norway',
                'Oman','Pakistan','Palau','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Pitcairn Islands','Poland','Portugal','Puerto Rico','Qatar','Republic of the Congo',
                'Réunion','Romania','Russia','Rwanda','Sahrawi Arab Democratic Republic','Saint Barthélemy','Saint Helena, Ascension and Tristan da Cunha','Saint Kitts and Nevis','Saint Martin',
                'Saint Lucia','Saint Pierre and Miquelon','Saint Vincent and the Grenadines','Samoa','San Marino','São Tomé and Príncipe','Saudi Arabia','Senegal','Serbia','Seychelles','Sierra Leone',
                'Singapore','Sint Maarten','Slovakia','Slovenia','Solomon Islands','Somalia','South Africa','South Korea','South Sudan','Spain','Sri Lanka','Sudan','Suriname','Svalbard','Swaziland',
                'Sweden','Switzerland','Syria','Taiwan','Tajikistan','Tanzania','Thailand','Togo','Tokelau','Tonga','Transnistria','Trinidad and Tobago','Tunisia','Turkey','Turkmenistan','Turks and Caicos Islands',
                'Tuvalu','Uganda','Ukraine','United Arab Emirates','United Kingdom','United States','United States Virgin Islands','Uruguay','Uzbekistan','Vanuatu','Vatican City','Venezuela',
                'Vietnam','Wallis and Futuna','Yemen','Zambia','Zimbabwe'   
            ];

return {
    setUpAutoComplete : function() {
        $.getScript(typeAheadCDN,function(data, textStatus, jqxhr) {
            if(jqxhr.status == 200) {
                $('#userCountry').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                    },
                    {
                      name: 'states',
                      source: countryList
                    });
            }
        });           
    }
}
}();

当DOM完全加载时，我调用setUpAutoComplete。

$(function(){ // When DOM has loaded
   Countries.setUpAutoComplete();
});

HTML：

<input type="text" class="form-control reg-dcf" id="userCountry" />

我在这里犯了什么错误？

Answer 1

在输入文字标记中，您错过了添加class =“typeahead”属性，请参阅此处https://twitter.github.io/typeahead.js/examples/

即使jquery UI自动完成功能也以相同的方式工作，这将显示国家名称以及何时键入文本框..

$(function () {
var countryList = [
            'Afghanistan','Albania','Algeria','American Samoa','Andorra','Angola','Anguilla','Antigua and Barbuda','Argentina','Armenia','Aruba','Australia','Austria','Azerbaijan',
            'The Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bermuda','Bhutan','Bolivia','Bosnia and Herzegovina','Botswana','Brazil','British Virgin Islands',
            'Brunei','Bulgaria','Burkina Faso','Burundi','Cambodia','Cameroon','Canada','Cape Verde','Cayman Islands','Central African Republic','Chad','Chile','China','Christmas Island',
            'Cocos Islands','Colombia','Comoros','Cook Islands','Costa Rica','Côte d\'Ivoire','Croatia','Cuba','Curaçao','Cyprus','Czech Republic','Democratic Republic of the Congo',
            'Denmark','Djibouti','Dominica','Dominican Republic','East Timor','Ecuador','Egypt','El Salvador','Equatorial Guinea','Eritrea','Estonia','Ethiopia','Falkland Islands',
            'Faroe Islands','Fiji','Finland','France','French Guiana','French Polynesia','Gabon','The Gambia','Georgia','Germany','Ghana','Gibraltar','Greece','Greenland','Grenada',
            'Guadeloupe','Guam','Guatemala','Guernsey','Guinea','Guinea-Bissau','Guyana','Haiti','Honduras','Hong Kong','Hungary','Iceland','India','Indonesia','Iran','Iraq','Ireland',
            'Isle of Man','Israel','Italy','Jamaica','Japan','Jersey','Jordan','Kazakhstan','Kenya','Kiribati','Kosovo','Kuwait','Kyrgyzstan','Laos','Latvia','Lebanon','Lesotho','Liberia',
            'Libya','Liechtenstein','Lithuania','Luxembourg','Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Marshall Islands','Martinique','Mauritania','Mauritius',
            'Mayotte','Mexico','Federated States of Micronesia','Moldova','Monaco','Mongolia','Montenegro','Montserrat','Morocco','Mozambique','Myanmar','Nagorno-Karabakh','Namibia','Nauru',
            'Nepal','Netherlands','New Caledonia','New Zealand','Nicaragua','Niger','Nigeria','Niue','Norfolk Island','North Korea','Northern Cyprus','Northern Mariana Islands','Norway',
            'Oman','Pakistan','Palau','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Pitcairn Islands','Poland','Portugal','Puerto Rico','Qatar','Republic of the Congo',
            'Réunion','Romania','Russia','Rwanda','Sahrawi Arab Democratic Republic','Saint Barthélemy','Saint Helena, Ascension and Tristan da Cunha','Saint Kitts and Nevis','Saint Martin',
            'Saint Lucia','Saint Pierre and Miquelon','Saint Vincent and the Grenadines','Samoa','San Marino','São Tomé and Príncipe','Saudi Arabia','Senegal','Serbia','Seychelles','Sierra Leone',
            'Singapore','Sint Maarten','Slovakia','Slovenia','Solomon Islands','Somalia','South Africa','South Korea','South Sudan','Spain','Sri Lanka','Sudan','Suriname','Svalbard','Swaziland',
            'Sweden','Switzerland','Syria','Taiwan','Tajikistan','Tanzania','Thailand','Togo','Tokelau','Tonga','Transnistria','Trinidad and Tobago','Tunisia','Turkey','Turkmenistan','Turks and Caicos Islands',
            'Tuvalu','Uganda','Ukraine','United Arab Emirates','United Kingdom','United States','United States Virgin Islands','Uruguay','Uzbekistan','Vanuatu','Vatican City','Venezuela',
            'Vietnam','Wallis and Futuna','Yemen','Zambia','Zimbabwe'   
        ];            
        $("#userCountry").autocomplete({
            source: countryList                
        });
    });

有关详细信息，请参阅此处https://jqueryui.com/autocomplete/#maxheight

无法从typeahead实现autopopulate。我在这里犯了什么错误？

1 个答案: