jamieholst / selecttoautocomplete Goto Github PK
View Code? Open in Web Editor NEWTurns any select tag into an autocomplete field with weighted options, synonyms and loose matching
Home Page: http://baymard.com/labs/country-selector
Turns any select tag into an autocomplete field with weighted options, synonyms and loose matching
Home Page: http://baymard.com/labs/country-selector
If you remove Lesotho, this changes to the next down the list, Liberia. Removing all the L countries puts Kyrgyzstan at the top. Something is seriously borked with the sorting.
When the user types 'Ireland' the results come back in this order:
Since the Republic of Ireland, which is usually referred to as 'Ireland', is not part of the United Kingdom, this sorting logic is not intuitive, i.e. when the user types Ireland, they most likely do not mean the United Kingdom.
I would expect to see the following results, in this order:
Northern Ireland is part of the UK, so it does make sense to leave the United Kingdom in the list of results, but not as the first item.
Hi, I'm getting the above on a simple form, when calling $('#id_country').selectToAutocomplete();
The exception is being raised on line 257, of jquery.select-to-autocomplete.js
This does work on another form, which shares a similar javascript context. I've poked around a bit in the source, but haven't seen anything obviously wrong, yet.
Hi,
sometimes it would be better to have the ISO code (already included in the data-alternative-spellings) as the value option, instead of the name. For example working with Symfony country field. I changed it, so I copy it here in case it's useful for someone else.
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Country</option>
<option value="AF" data-alternative-spellings="AF افغانستان">Afghanistan</option>
<option value="AX" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
<option value="AL" data-alternative-spellings="AL">Albania</option>
<option value="DZ" data-alternative-spellings="DZ الجزائر">Algeria</option>
<option value="AS" data-alternative-spellings="AS" data-relevancy-booster="0.5">American Samoa</option>
<option value="AD" data-alternative-spellings="AD" data-relevancy-booster="0.5">Andorra</option>
<option value="AO" data-alternative-spellings="AO">Angola</option>
<option value="AI" data-alternative-spellings="AI" data-relevancy-booster="0.5">Anguilla</option>
<option value="AQ" data-alternative-spellings="AQ" data-relevancy-booster="0.5">Antarctica</option>
<option value="AG" data-alternative-spellings="AG" data-relevancy-booster="0.5">Antigua And Barbuda</option>
<option value="AR" data-alternative-spellings="AR">Argentina</option>
<option value="AM" data-alternative-spellings="AM Հայաստան">Armenia</option>
<option value="AW" data-alternative-spellings="AW" data-relevancy-booster="0.5">Aruba</option>
<option value="AU" data-alternative-spellings="AU" data-relevancy-booster="1.5">Australia</option>
<option value="AT" data-alternative-spellings="AT Österreich Osterreich Oesterreich ">Austria</option>
<option value="AZ" data-alternative-spellings="AZ">Azerbaijan</option>
<option value="BS" data-alternative-spellings="BS">Bahamas</option>
<option value="BH" data-alternative-spellings="BH البحرين">Bahrain</option>
<option value="BD" data-alternative-spellings="BD বাংলাদেশ" data-relevancy-booster="2">Bangladesh</option>
<option value="BB" data-alternative-spellings="BB">Barbados</option>
<option value="BY" data-alternative-spellings="BY Беларусь">Belarus</option>
<option value="BE" data-alternative-spellings="BE België Belgie Belgien Belgique" data-relevancy-booster="1.5">Belgium</option>
<option value="BZ" data-alternative-spellings="BZ">Belize</option>
<option value="BJ" data-alternative-spellings="BJ">Benin</option>
<option value="BM" data-alternative-spellings="BM" data-relevancy-booster="0.5">Bermuda</option>
<option value="BT" data-alternative-spellings="BT भूटान">Bhutan</option>
<option value="BO" data-alternative-spellings="BO">Bolivia</option>
<option value="BQ" data-alternative-spellings="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA" data-alternative-spellings="BA Босна и Херцеговина">Bosnia and Herzegovina</option>
<option value="BW" data-alternative-spellings="BW">Botswana</option>
<option value="BV" data-alternative-spellings="BV">Bouvet Island</option>
<option value="BR" data-alternative-spellings="BR Brasil" data-relevancy-booster="2">Brazil</option>
<option value="IO" data-alternative-spellings="IO">British Indian Ocean Territory</option>
<option value="BN" data-alternative-spellings="BN">Brunei Darussalam</option>
<option value="BG" data-alternative-spellings="BG България">Bulgaria</option>
<option value="BF" data-alternative-spellings="BF">Burkina Faso</option>
<option value="BI" data-alternative-spellings="BI">Burundi</option>
<option value="KH" data-alternative-spellings="KH កម្ពុជា">Cambodia</option>
<option value="CM" data-alternative-spellings="CM">Cameroon</option>
<option value="CA" data-alternative-spellings="CA" data-relevancy-booster="2">Canada</option>
<option value="CV" data-alternative-spellings="CV Cabo">Cape Verde</option>
<option value="KY" data-alternative-spellings="KY" data-relevancy-booster="0.5">Cayman Islands</option>
<option value="CF" data-alternative-spellings="CF">Central African Republic</option>
<option value="TD" data-alternative-spellings="TD تشاد Tchad">Chad</option>
<option value="CL" data-alternative-spellings="CL">Chile</option>
<option value="CN" data-alternative-spellings="CN Zhongguo Zhonghua Peoples Republic **/中华" data-relevancy-booster="3.5">China</option>
<option value="CX" data-alternative-spellings="CX" data-relevancy-booster="0.5">Christmas Island</option>
<option value="CC" data-alternative-spellings="CC" data-relevancy-booster="0.5">Cocos (Keeling) Islands</option>
<option value="CO" data-alternative-spellings="CO">Colombia</option>
<option value="KM" data-alternative-spellings="KM جزر القمر">Comoros</option>
<option value="CG" data-alternative-spellings="CG">Congo</option>
<option value="CD" data-alternative-spellings="CD Congo-Brazzaville Repubilika ya Kongo">Congo, the Democratic Republic of the</option>
<option value="CK" data-alternative-spellings="CK" data-relevancy-booster="0.5">Cook Islands</option>
<option value="CR" data-alternative-spellings="CR">Costa Rica</option>
<option value="CI" data-alternative-spellings="CI Cote dIvoire">Côte d'Ivoire</option>
<option value="HR" data-alternative-spellings="HR Hrvatska">Croatia</option>
<option value="CU" data-alternative-spellings="CU">Cuba</option>
<option value="CW" data-alternative-spellings="CW Curacao">Curaçao</option>
<option value="CY" data-alternative-spellings="CY Κύπρος Kýpros Kıbrıs">Cyprus</option>
<option value="CZ" data-alternative-spellings="CZ Česká Ceska">Czech Republic</option>
<option value="DK" data-alternative-spellings="DK Danmark" data-relevancy-booster="1.5">Denmark</option>
<option value="DJ" data-alternative-spellings="DJ جيبوتي Jabuuti Gabuuti">Djibouti</option>
<option value="DM" data-alternative-spellings="DM Dominique" data-relevancy-booster="0.5">Dominica</option>
<option value="DO" data-alternative-spellings="DO">Dominican Republic</option>
<option value="EC" data-alternative-spellings="EC">Ecuador</option>
<option value="EG" data-alternative-spellings="EG" data-relevancy-booster="1.5">Egypt</option>
<option value="SV" data-alternative-spellings="SV">El Salvador</option>
<option value="GQ" data-alternative-spellings="GQ">Equatorial Guinea</option>
<option value="ER" data-alternative-spellings="ER إرتريا ኤርትራ">Eritrea</option>
<option value="EE" data-alternative-spellings="EE Eesti">Estonia</option>
<option value="ET" data-alternative-spellings="ET ኢትዮጵያ">Ethiopia</option>
<option value="FK" data-alternative-spellings="FK" data-relevancy-booster="0.5">Falkland Islands (Malvinas)</option>
<option value="FO" data-alternative-spellings="FO Føroyar Færøerne" data-relevancy-booster="0.5">Faroe Islands</option>
<option value="FJ" data-alternative-spellings="FJ Viti फ़िजी">Fiji</option>
<option value="FI" data-alternative-spellings="FI Suomi">Finland</option>
<option value="FR" data-alternative-spellings="FR République française" data-relevancy-booster="2.5">France</option>
<option value="GF" data-alternative-spellings="GF">French Guiana</option>
<option value="PF" data-alternative-spellings="PF Polynésie française">French Polynesia</option>
<option value="TF" data-alternative-spellings="TF">French Southern Territories</option>
<option value="GA" data-alternative-spellings="GA République Gabonaise">Gabon</option>
<option value="GM" data-alternative-spellings="GM">Gambia</option>
<option value="GE" data-alternative-spellings="GE საქართველო">Georgia</option>
<option value="DE" data-alternative-spellings="DE Bundesrepublik Deutschland" data-relevancy-booster="3">Germany</option>
<option value="GH" data-alternative-spellings="GH">Ghana</option>
<option value="GI" data-alternative-spellings="GI" data-relevancy-booster="0.5">Gibraltar</option>
<option value="GR" data-alternative-spellings="GR Ελλάδα" data-relevancy-booster="1.5">Greece</option>
<option value="GL" data-alternative-spellings="GL grønland" data-relevancy-booster="0.5">Greenland</option>
<option value="GD" data-alternative-spellings="GD">Grenada</option>
<option value="GP" data-alternative-spellings="GP">Guadeloupe</option>
<option value="GU" data-alternative-spellings="GU">Guam</option>
<option value="GT" data-alternative-spellings="GT">Guatemala</option>
<option value="GG" data-alternative-spellings="GG" data-relevancy-booster="0.5">Guernsey</option>
<option value="GN" data-alternative-spellings="GN">Guinea</option>
<option value="GW" data-alternative-spellings="GW">Guinea-Bissau</option>
<option value="GY" data-alternative-spellings="GY">Guyana</option>
<option value="HT" data-alternative-spellings="HT">Haiti</option>
<option value="HM" data-alternative-spellings="HM">Heard Island and McDonald Islands</option>
<option value="VA" data-alternative-spellings="VA" data-relevancy-booster="0.5">Holy See (Vatican City State)</option>
<option value="HN" data-alternative-spellings="HN">Honduras</option>
<option value="HK" data-alternative-spellings="HK 香港">Hong Kong</option>
<option value="HU" data-alternative-spellings="HU Magyarország">Hungary</option>
<option value="IS" data-alternative-spellings="IS Island">Iceland</option>
<option value="IN" data-alternative-spellings="IN भारत गणराज्य Hindustan" data-relevancy-booster="3">India</option>
<option value="ID" data-alternative-spellings="ID" data-relevancy-booster="2">Indonesia</option>
<option value="IR" data-alternative-spellings="IR ایران">Iran, Islamic Republic of</option>
<option value="IQ" data-alternative-spellings="IQ العراق">Iraq</option>
<option value="IE" data-alternative-spellings="IE Éire" data-relevancy-booster="1.2">Ireland</option>
<option value="IM" data-alternative-spellings="IM" data-relevancy-booster="0.5">Isle of Man</option>
<option value="IL" data-alternative-spellings="IL إسرائيل ישראל">Israel</option>
<option value="IT" data-alternative-spellings="IT Italia" data-relevancy-booster="2">Italy</option>
<option value="JM" data-alternative-spellings="JM">Jamaica</option>
<option value="JP" data-alternative-spellings="JP Nippon Nihon 日本" data-relevancy-booster="2.5">Japan</option>
<option value="JE" data-alternative-spellings="JE" data-relevancy-booster="0.5">Jersey</option>
<option value="JO" data-alternative-spellings="JO الأردن">Jordan</option>
<option value="KZ" data-alternative-spellings="KZ Қазақстан Казахстан">Kazakhstan</option>
<option value="KE" data-alternative-spellings="KE">Kenya</option>
<option value="KI" data-alternative-spellings="KI">Kiribati</option>
<option value="KP" data-alternative-spellings="KP North Korea">Korea, Democratic People's Republic of</option>
<option value="KR" data-alternative-spellings="KR South Korea" data-relevancy-booster="1.5">Korea, Republic of</option>
<option value="KW" data-alternative-spellings="KW الكويت">Kuwait</option>
<option value="KG" data-alternative-spellings="KG Кыргызстан">Kyrgyzstan</option>
<option value="LA" data-alternative-spellings="LA">Lao People's Democratic Republic</option>
<option value="LV" data-alternative-spellings="LV Latvija">Latvia</option>
<option value="LB" data-alternative-spellings="LB لبنان">Lebanon</option>
<option value="LS" data-alternative-spellings="LS">Lesotho</option>
<option value="LR" data-alternative-spellings="LR">Liberia</option>
<option value="LY" data-alternative-spellings="LY ليبيا">Libyan Arab Jamahiriya</option>
<option value="LI" data-alternative-spellings="LI">Liechtenstein</option>
<option value="LT" data-alternative-spellings="LT Lietuva">Lithuania</option>
<option value="LU" data-alternative-spellings="LU">Luxembourg</option>
<option value="MO" data-alternative-spellings="MO">Macao</option>
<option value="MK" data-alternative-spellings="MK Македонија">Macedonia, The Former Yugoslav Republic Of</option>
<option value="MG" data-alternative-spellings="MG Madagasikara">Madagascar</option>
<option value="MW" data-alternative-spellings="MW">Malawi</option>
<option value="MY" data-alternative-spellings="MY">Malaysia</option>
<option value="MV" data-alternative-spellings="MV">Maldives</option>
<option value="ML" data-alternative-spellings="ML">Mali</option>
<option value="MT" data-alternative-spellings="MT">Malta</option>
<option value="MH" data-alternative-spellings="MH" data-relevancy-booster="0.5">Marshall Islands</option>
<option value="MQ" data-alternative-spellings="MQ">Martinique</option>
<option value="MR" data-alternative-spellings="MR الموريتانية">Mauritania</option>
<option value="MU" data-alternative-spellings="MU">Mauritius</option>
<option value="YT" data-alternative-spellings="YT">Mayotte</option>
<option value="MX" data-alternative-spellings="MX Mexicanos" data-relevancy-booster="1.5">Mexico</option>
<option value="FM" data-alternative-spellings="FM">Micronesia, Federated States of</option>
<option value="MD" data-alternative-spellings="MD">Moldova, Republic of</option>
<option value="MC" data-alternative-spellings="MC">Monaco</option>
<option value="MN" data-alternative-spellings="MN Mongγol ulus Монгол улс">Mongolia</option>
<option value="ME" data-alternative-spellings="ME">Montenegro</option>
<option value="MS" data-alternative-spellings="MS" data-relevancy-booster="0.5">Montserrat</option>
<option value="MA" data-alternative-spellings="MA المغرب">Morocco</option>
<option value="MZ" data-alternative-spellings="MZ Moçambique">Mozambique</option>
<option value="MM" data-alternative-spellings="MM">Myanmar</option>
<option value="NA" data-alternative-spellings="NA Namibië">Namibia</option>
<option value="NR" data-alternative-spellings="NR Naoero" data-relevancy-booster="0.5">Nauru</option>
<option value="NP" data-alternative-spellings="NP नेपाल">Nepal</option>
<option value="NL" data-alternative-spellings="NL Holland Nederland" data-relevancy-booster="1.5">Netherlands</option>
<option value="NC" data-alternative-spellings="NC" data-relevancy-booster="0.5">New Caledonia</option>
<option value="NZ" data-alternative-spellings="NZ Aotearoa">New Zealand</option>
<option value="NI" data-alternative-spellings="NI">Nicaragua</option>
<option value="NE" data-alternative-spellings="NE Nijar">Niger</option>
<option value="NG" data-alternative-spellings="NG Nijeriya Naíjíríà" data-relevancy-booster="1.5">Nigeria</option>
<option value="NU" data-alternative-spellings="NU" data-relevancy-booster="0.5">Niue</option>
<option value="NF" data-alternative-spellings="NF" data-relevancy-booster="0.5">Norfolk Island</option>
<option value="MP" data-alternative-spellings="MP" data-relevancy-booster="0.5">Northern Mariana Islands</option>
<option value="NO" data-alternative-spellings="NO Norge Noreg" data-relevancy-booster="1.5">Norway</option>
<option value="OM" data-alternative-spellings="OM عمان">Oman</option>
<option value="PK" data-alternative-spellings="PK پاکستان" data-relevancy-booster="2">Pakistan</option>
<option value="PW" data-alternative-spellings="PW" data-relevancy-booster="0.5">Palau</option>
<option value="PS" data-alternative-spellings="PS فلسطين">Palestinian Territory, Occupied</option>
<option value="PA" data-alternative-spellings="PA">Panama</option>
<option value="PG" data-alternative-spellings="PG">Papua New Guinea</option>
<option value="PY" data-alternative-spellings="PY">Paraguay</option>
<option value="PE" data-alternative-spellings="PE">Peru</option>
<option value="PH" data-alternative-spellings="PH Pilipinas" data-relevancy-booster="1.5">Philippines</option>
<option value="PN" data-alternative-spellings="PN" data-relevancy-booster="0.5">Pitcairn</option>
<option value="PL" data-alternative-spellings="PL Polska" data-relevancy-booster="1.25">Poland</option>
<option value="PT" data-alternative-spellings="PT Portuguesa" data-relevancy-booster="1.5">Portugal</option>
<option value="PR" data-alternative-spellings="PR">Puerto Rico</option>
<option value="QA" data-alternative-spellings="QA قطر">Qatar</option>
<option value="RE" data-alternative-spellings="RE Reunion">Réunion</option>
<option value="RO" data-alternative-spellings="RO Rumania Roumania România">Romania</option>
<option value="RU" data-alternative-spellings="RU Rossiya Российская Россия" data-relevancy-booster="2.5">Russian Federation</option>
<option value="RW" data-alternative-spellings="RW">Rwanda</option>
<option value="BL" data-alternative-spellings="BL St. Barthelemy">Saint Barthélemy</option>
<option value="SH" data-alternative-spellings="SH St.">Saint Helena</option>
<option value="KN" data-alternative-spellings="KN St.">Saint Kitts and Nevis</option>
<option value="LC" data-alternative-spellings="LC St.">Saint Lucia</option>
<option value="MF" data-alternative-spellings="MF St.">Saint Martin (French Part)</option>
<option value="PM" data-alternative-spellings="PM St.">Saint Pierre and Miquelon</option>
<option value="VC" data-alternative-spellings="VC St.">Saint Vincent and the Grenadines</option>
<option value="WS" data-alternative-spellings="WS">Samoa</option>
<option value="SM" data-alternative-spellings="SM">San Marino</option>
<option value="ST" data-alternative-spellings="ST">Sao Tome and Principe</option>
<option value="SA" data-alternative-spellings="SA السعودية">Saudi Arabia</option>
<option value="SN" data-alternative-spellings="SN Sénégal">Senegal</option>
<option value="RS" data-alternative-spellings="RS Србија Srbija">Serbia</option>
<option value="SC" data-alternative-spellings="SC" data-relevancy-booster="0.5">Seychelles</option>
<option value="SL" data-alternative-spellings="SL">Sierra Leone</option>
<option value="SG" data-alternative-spellings="SG Singapura சிங்கப்பூர் குடியரசு 新加坡共和国">Singapore</option>
<option value="SX" data-alternative-spellings="SX">Sint Maarten (Dutch Part)</option>
<option value="SK" data-alternative-spellings="SK Slovenská Slovensko">Slovakia</option>
<option value="SI" data-alternative-spellings="SI Slovenija">Slovenia</option>
<option value="SB" data-alternative-spellings="SB">Solomon Islands</option>
<option value="SO" data-alternative-spellings="SO الصومال">Somalia</option>
<option value="ZA" data-alternative-spellings="ZA RSA Suid-Afrika">South Africa</option>
<option value="GS" data-alternative-spellings="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS" data-alternative-spellings="SS">South Sudan</option>
<option value="ES" data-alternative-spellings="ES España" data-relevancy-booster="2">Spain</option>
<option value="LK" data-alternative-spellings="LK ශ්රී ලංකා இலங்கை Ceylon">Sri Lanka</option>
<option value="SD" data-alternative-spellings="SD السودان">Sudan</option>
<option value="SR" data-alternative-spellings="SR शर्नम् Sarnam Sranangron">Suriname</option>
<option value="SJ" data-alternative-spellings="SJ" data-relevancy-booster="0.5">Svalbard and Jan Mayen</option>
<option value="SZ" data-alternative-spellings="SZ weSwatini Swatini Ngwane">Swaziland</option>
<option value="SE" data-alternative-spellings="SE Sverige" data-relevancy-booster="1.5">Sweden</option>
<option value="CH" data-alternative-spellings="CH Swiss Confederation Schweiz Suisse Svizzera Svizra" data-relevancy-booster="1.5">Switzerland</option>
<option value="SY" data-alternative-spellings="SY Syria سورية">Syrian Arab Republic</option>
<option value="TW" data-alternative-spellings="TW 台灣 臺灣">Taiwan, Province of China</option>
<option value="TJ" data-alternative-spellings="TJ Тоҷикистон Toçikiston">Tajikistan</option>
<option value="TZ" data-alternative-spellings="TZ">Tanzania, United Republic of</option>
<option value="TH" data-alternative-spellings="TH ประเทศไทย Prathet Thai">Thailand</option>
<option value="TL" data-alternative-spellings="TL">Timor-Leste</option>
<option value="TG" data-alternative-spellings="TG Togolese">Togo</option>
<option value="TK" data-alternative-spellings="TK" data-relevancy-booster="0.5">Tokelau</option>
<option value="TO" data-alternative-spellings="TO">Tonga</option>
<option value="TT" data-alternative-spellings="TT">Trinidad and Tobago</option>
<option value="TN" data-alternative-spellings="TN تونس">Tunisia</option>
<option value="TR" data-alternative-spellings="TR Türkiye Turkiye">Turkey</option>
<option value="TM" data-alternative-spellings="TM Türkmenistan">Turkmenistan</option>
<option value="TC" data-alternative-spellings="TC" data-relevancy-booster="0.5">Turks and Caicos Islands</option>
<option value="TV" data-alternative-spellings="TV" data-relevancy-booster="0.5">Tuvalu</option>
<option value="UG" data-alternative-spellings="UG">Uganda</option>
<option value="UA" data-alternative-spellings="UA Ukrayina Україна">Ukraine</option>
<option value="AE" data-alternative-spellings="AE UAE الإمارات">United Arab Emirates</option>
<option value="GB" data-alternative-spellings="GB Great Britain England UK Wales Scotland Northern Ireland" data-relevancy-booster="2.5">United Kingdom</option>
<option value="US" data-alternative-spellings="US USA United States of America" data-relevancy-booster="3.5">United States</option>
<option value="UM" data-alternative-spellings="UM">United States Minor Outlying Islands</option>
<option value="UY" data-alternative-spellings="UY">Uruguay</option>
<option value="UZ" data-alternative-spellings="UZ Ўзбекистон O'zbekstan O‘zbekiston">Uzbekistan</option>
<option value="VU" data-alternative-spellings="VU">Vanuatu</option>
<option value="VE" data-alternative-spellings="VE">Venezuela</option>
<option value="VN" data-alternative-spellings="VN Việt Nam" data-relevancy-booster="1.5">Vietnam</option>
<option value="VG" data-alternative-spellings="VG" data-relevancy-booster="0.5">Virgin Islands, British</option>
<option value="VI" data-alternative-spellings="VI" data-relevancy-booster="0.5">Virgin Islands, U.S.</option>
<option value="WF" data-alternative-spellings="WF" data-relevancy-booster="0.5">Wallis and Futuna</option>
<option value="EH" data-alternative-spellings="EH لصحراء الغربية">Western Sahara</option>
<option value="YE" data-alternative-spellings="YE اليمن">Yemen</option>
<option value="ZM" data-alternative-spellings="ZM">Zambia</option>
<option value="ZW" data-alternative-spellings="ZW">Zimbabwe</option>
</select>
It would be nice if the plugin had an option to include a button to open available options. It could be positioned on the far right in the search box and when clicked, it would open a list of the predefined options. This would cover cases where the user didn't know about the options available.
When using versions greater than 1.8.23 the first option in the list is not selected by default therefore it is not possible to complete the input just by hitting enter after typing rather the user must now at the very least hit the down key or use the mouse which ruins the whole point of the plugin.
I am developing a contact us page and I'm using the validate plugin as well as the selectToAutocomplete plugin. Everything works great in Chrome but in IE the form will submit without validation and the browser shows the following error:
Message: Member not found.
Line: 2
Char: 30636
Code: 0
URI: jquery-1.7.1.min.js
Now, I do realize that the error is from my jquery file but when I remove the jquery statement that calls selectToAutocomplete everything works like normal.
Thanks,
Demo site works (it's using v1.0.3), but the following test for IE in v1.0.9 fails:
if ( /msie/.test(navigator.userAgent.toLowerCase()) && parseInt(navigator.appVersion,10) <= 6)
because parseInt(navigator.appVersion,10) does not return the version number.
Check out the discussion here http://stackoverflow.com/a/15983064 (their test for IE version won't work for IE11, but that's fine because your plugin only needed to test for older IE).
p.s. Thanks for a great plugin.
In terms of usability I wonder if it wouldn't be helpful to have the input text be automatically and completely selected on mouse click as it currently is by default when you tab into the field.
Something like the following applied to the input field:
$('#inputid').click(function() { this.focus(); this.select(); });
It would be nice to be able to configure the values allowed via an external Javascript object and not by reading the HTML code. This way, we could:
What do you think ?
Is there a hook in the call to register events onChange
or onSelect
?
I save the data in localStorage
after each change
Like this
selectToAutocomplete({
autoFocus: false,
autoselect: false,
onChange: fn
})
If you have a .change() for the select that you turn into an autocomplete, it won't fire (despite the value changing). I haven't yet found a workaround.
On this page:
http://baymard.com/labs/country-selector
If you
I just had a use-case for capturing the change-event for the select being autocompleted.
I guess it would be nice to trigger the event from the update_select_value.
To make it work for me, I just added
context.$select_field.change();
in line 215 in the *.js.
(My) expected behaviour: 'Ireland' should be first in the list as 'ire' is an exact match for the beginning of the country name.
Actual behaviour: 'United Kingdom' is first in the list, despite the weaker matching. The 'data-alternative-spellings' attribute for United Kingdom includes 'Ireland'.
(My) expected behaviour: 'Ireland' should be first in the list as it is an exact match for the entered phrase.
Actual behaviour: 'United Kingdom' is first in the list, despite the weaker matching. The 'data-alternative-spellings' attribute for United Kingdom includes 'Ireland'.
In test case 1, it is debatable whether the issue is one of the data-relevancy-booster is set too high (2.5). When data-relevancy-booster is set to 1.2 or lower, "Ireland" will be the first match.
In test case 2, however, the exact match for the default name should surely (IMHO) outweigh the data-relevancy-boost applied to United Kingdom.
There's a middle ground between test cases 1 and 2, wherein it is difficult to determine where matching against the primary name should outweigh the data-relevancy-booster.
There's a bug in 1.0.5 that's not present in the 1.0.3 demo. It relates to the behavior when you tab out of the input field after having typed in a valid country name without having clicked in the list.
If I e.g. type 'brazil' and tab out of the box in 1.0.3, it works and will select Brazil. If I do this in 1.0.5 it will erase the content of the input field.
The cause is within the code that handles blur() starting at line 61 which contains the following statement:
if ( !($text_field.val() in valid_values) && ... [snip]
This will always fire because the test '$text_field.val() in valid_values' will typically return false (unless the input happens to be a number), since the "in" operator matches against the keys of the array, not the values.
My fix for this was a bit more involved than just allowing for this, as I also wanted to match case-insensitively and against the alternate spellings as well, so I ended up doing this:
$text_field.blur(function() {
var val = context.$text_field.val().toLowerCase().trim();
var matching_option = { 'real-value': false };
for (var i=0; i < context.options.length; i++) {
if (val === context.options[i]['label'].toLowerCase()) {
matching_option = context.options[i];
break;
}
};
if (matching_option['real-value'] === false) {
for (var i=0; i < context.options.length; i++) {
var matches = context.options[i].matches.split(' ');
for (var j = 0; j < matches.length; j++) {
if (val === matches[j].toLowerCase()) {
matching_option = context.options[i];
break;
}
}
};
}
if (context.$select_field.val() !== matching_option['real-value']) {
context.$select_field.val(matching_option['real-value'] || '');
context.$select_field.change();
}
if (matching_option['real-value']) {
context.$text_field.val(matching_option['label']);
}
if (typeof context.settings['handle_invalid_input'] === 'function' && context.$select_field.val() === '') {
context.settings['handle_invalid_input'](context);
}
});
This might be intentional, but it seems that the field should have type='text' defined.
It would be wonderful if you could support multiple select values. I rather like just comma separating the values and then growing the box size if it needs to wrap.
Using the demo HTML, I added an extra option for APO/FPO with the value of US to the select like so:
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option selected="selected" value="US" data-relevancy-booster="3.5" data-alternative-spellings="US USA United States of America">United States</option>
<option value="US" data-relevancy-booster="2.5" data-alternative-spellings="APO/FPO">APO/FPO</option><option value="Afghanistan" data-alternative-spellings="AF">Afghanistan</option>
<option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
</select>
Using jQuery to find the selected option outputs the incorrect country:
$("#country-selector").find(':selected').text();
Expected: United States
Actual: APO/FPO
When I turn off selectToAutocomplete, I get the expected results.
I'm getting the firebug console error when I type into my select, c.curCSS is not a function
. I'm guessing c is not declared for whatever reason. Is anybody else having this difficulty, I'm using the same code basically verbatim, except I'm using JQuery v1.8.0.
It would be great to have an option of limiting the output so people would narrow their matches quicker.
Hi,
Firstly I came across your blog post and it was exactly what I was looking for. Great article and thank you for the code, it works a treat.
That was until I tried plugging it into a current form which uses Spry Validation. For some reason I've got the Validation working find along with the autoComplete but it just wont submit the from. I'm not sure what I'm missing and would really appreciate some assistance in getting this to work.
Regards
David.
Trying to figure out why it falls behind content. Z-index adjustments have no effect.
Thanks.
In line 61: var value = raw_attrs[i].nodeValue.
nodeValue is deprecated and Chrome complains about it.
Is better to use .value attribute: raw_attrs[i].value
selectToAutocomplete.js is insanely good :)
Is there an easy way to disable selectToAutocomplete for a specific Select in a form?
Many thanks,
tetsuo73
Hi,
This plugin are very good, thank you.
Could you help me how can I highlight the typed characters in the result (like Google search)?
Thanks,
L
If I enter an alternative spelling into a textbox and use the mouse to focus on a different element afterwards, the input is rejected, even when the input exactly matched an alternative spelling and only one element was left to be selected.
I would expect the input to be accepted in this case.
<option disabled selected>Month</option>
<option value="1" data-alternative-spellings="1 January Jan.">01</option>
<option value="2" data-alternative-spellings="2 February Feb.">02</option>
..
Calling Taiwan a Province of China is not very politically neutral: http://news.bbc.co.uk/1/hi/world/asia-pacific/4308678.stm
Using a select drop down limits the user to certain set of acceptable answers. While I really like selectToAutocomplete I find that I miss that aspect of select boxes. If I type a single letter and submit the form the very first option in the list is submitted even if that option did not match the single letter I typed. Is there a way to ensure the user selects one of the options available, or at least that the first option in the subset of options gets submitted?
For example, my options start with "United States" yet when I type and submit "f" it is "United States" that is submitted, not "France".
To clarify the flow goes like this: I type "f" then click off the field where it stays "f". I know that if I type "f" and hit "enter" that "France" auto fill the field. So I guess the question is, is there a way to get "France" to auto fill if the user simply clicks off the field while typing?
Typing in "Sw" currently gives botswana a favorable ranking over Sweden.
Typing Ireland doesn't perform very well.
It puts United Kingdom always above it. I suppose it's doing that because of Norther Ireland, which is good, but if I type 'Irel' then Ireland should be above The United Kingdom.
Some countries' alternative spellings (Éire, Österreich etc) include accented characters that are not matched by their non-accented equivalents.
For example, entering 'eire' for Ireland does not result in a match for Ireland.
Rather than amending the data-alternative-spellings to account for accent variations, would it be possible to having broad string matching that works with-without accents?
This also happens when you simply press down in the text field, and appears that it is caused by something within selectToAutocomplete. I tried the dropdown using simply jQuery UI's autocomplete and a blank search returns the list alphabetically as expected - so it must me something with this plugin.
I'm still digging into the issue but thought I'd post now and see if anyone else has come against this too. From some testing, this only comes into affect when there is more than 10 options in the select. Exactly 10 options displays fine, 11 options shows this issue though. From what I can see, the middle option goes to position 1 and the original second option goes to where the middle option came from.
For example, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
would become 6, 1, 3, 4, 5, 2, 7, 8, 9, 10, 11
You can see this on the demo on your site as well. For what it's worth, the test I did had no additional weighting set per item. Setting both sort
and relevancy-sorting
to false
removed this issue, but setting either to true
showed the issue.
I have an address form that toggles the disabled attribute on the Country field based on the address type (domestic vs. foreign). This also blanks the value of the Country field if domestic is chosen. This works fine with plain select or input fields, but when I use this plugin, my JavaScript no longer toggles the disabled attribute or blanks out its value.
Here is my function:
function selectAddressType() {
var AddressType=document.getElementById('FLD025')
if (AddressType.value=="0") {
document.getElementById('FLD032').value='';
document.getElementById('FLD033').value='';
document.getElementById('FLD032').disabled=true;
document.getElementById('FLD033').disabled=true;
checkAddress();
}
else {
document.getElementById('FLD032').disabled=false;
document.getElementById('FLD033').disabled=false;
}
mapThis('main');
}
FLD025 is the Address Type, FLD032 is the Country field and FLD033 is the Country Code field.
I suggest choosing to multi-license under a broad set:
maybe some others?
Hi, I'm trying to open the dropdown with all the options when the user focus on it. With nothing typed.
Anybody have idea to do this?
Because of the position: relative;
property on the ul.ui-autocomplete
element, the country list is not taken out of the document flow.
This causes an empty space to occur at the bottom of the site in Firefox (see image at the bottom)
It’s not an issue with my own CSS, I’ve noticed more space appearing on the officiall website too. Not pointing fingers here, just clearing thing out ;)
Might it be a solution to actually put the .ui-autocomplete list beneath the <input>
element in the HTML, instead of putting it at the end of the code and then giving it a relative position based on the <input>
’s position on the page?
I've attempted to create a state and country auto complete box with separate settings. The last plugin defined always overrides the first.
$('select[id$="ddlState"]').selectToAutocomplete({ 'text-input-selector': 'input[id$="tbState"]', 'allow-free-text-entry': true, 'remove-valueless-options': false, 'copy-attributes-to-text-field': false });
$('select[id$="ddlCountry"]').selectToAutocomplete({ 'text-input-selector': 'input[id$="tbCountry"]', 'allow-free-text-entry': false, 'remove-valueless-options': false, 'copy-attributes-to-text-field': false });
The "allow-free-text-entry" setting is one I added myself.
I'm using Jquery to update the selection on the fly. I'd like to be able to update the selection on the fly. Setting the 'val()' seems to work sometimes, but sometimes it doesn't.
Are there any plans to make this more Jquery UI compliant to have an update method? Can it be updated to breakout the methods better? I tried to write an extension, but I'm not the best at Jquery / Javascript.
Hey guys,
I have two quick questions:
What would be the best way to update the options used in the autocomplete? This can be easily achieved by running extract_options()
again, but how can this be run at any time by the user and still have access to context
?
Similarly, should a function be incorporated to destroy the selectToComplete functionality?
Hi to all,
i want to use the normal select option placeholder as the default input value not a html5 placeholder like in the demo (http://baymard.com/labs/country-selector) (because of IE9 requirement -.-) .
It works fine when i edit line 47 javascript selected_finder = 'option:selected[value!=""]:first';
to javascript selected_finder = 'option:selected[value=""]:first';
and
build the select element like the demo whithout html5 placeholder:
<select class="field" name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Country</option>
<option value="Afghanistan" >Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
</select>
Cause this edit problems?
BR
Joni
Hey,
II tried the demo on Firefox for Android 33.0 Beta, and it doesn't auto-complete.
I tried the plugin for my website using jquery 1.9+ but didn't work.
We manage to get it working using the jquery migration plugin (https://github.com/jquery/jquery-migrate/).
I think it's time to make an update to this very cool plugin :-)
"msie is the flag on the jQuery.browser property, which was deprecated since version 1.3 and was removed in jQuery 1.9.0."
Issue only found in jQuery 1.9, and on Chrome. Have had to revert to 1.8.3 for now.
We're using jquery 1.6.4 with jquery ui 1.11.0. This plugin works beautifully on all major browsers, but when tested on IE 8 & 9, the select box never converts to the autocomplete box. There are no errors in the console as well.
Any input would be appreciated.
Thanks
I'm on froyo, using the default (webkit) mobile browser. I get the input field, but no auto-complete.
The regexp used to find the strict values is the same than the partial one and, therefore, the sorting is uncorrect.
I fixed the issue locally, by doing this :
matcher['strict'] = new RegExp( "^" + $.ui.autocomplete.escapeRegex( split_term[i] ), "i" );
matcher['strict'] = new RegExp( "^" + $.ui.autocomplete.escapeRegex( split_term[i] ) + "$", "i" );
One of the very last lines is an error message which references "jQuery.tooltip" - I suggest that this is a mistake and should be corrected/removed appropriately.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.