jamieholst / selecttoautocomplete Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 144.0 503 KB

Turns any select tag into an autocomplete field with weighted options, synonyms and loose matching

Home Page: http://baymard.com/labs/country-selector

JavaScript 100.00%

selecttoautocomplete's People

Contributors

Stargazers

Watchers

Forkers

christianvuerings sebm ippy04 nacho4d coderm lucanos lucarosaldi bumpux jasondavis dontangg serialc littlefyr prestarocket dergutemoritz michelleboisson emphanos tellibus pngised kencorbettjr joeldow alesei-n nikoroberts el3ment msurguy parrishioner onesoftdk vitalijssilins warmth lucasgonze wangj rappsodystudios screaming jamieabbott alicjab hasschapman ebukva firedev pajusmar staser jnpwebdeveloper tomalterman khalidelsayed kuceram fg xemlock waylanwong intfrr lujaw neutroncreations ibroadfo heltiongson littlerm ptimson drakeh msm2020 angelomesquita bladebo xreizon styggiti dineshkumarshaw ejsiddiqui jamesgary johnnncodes salletludovic alescode otmezger vgvenkat rob180 arjunmenon hadifarnoud mariquit andiio kamalcha mattwelson mtmace thiagoaslima alexbain dive-michiel rek singlaive jwnacnud carlaspets ajquick cenkcakmak flybe vpineda7 jonimarques mediamande bhanuc ventrebleu lennondtps brentwallac sjord anthonypotgieter brandoncarl slde-rorschach nicolerauch eladmi faizshukri danielma156

selecttoautocomplete's Issues

searching for " " or hitting backspace puts Lesotho at the top of the list

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.

"Northern Ireland" missing as alternative spelling for United Kingdom

Non-intuitive sorting logic for 'Ireland'

When the user types 'Ireland' the results come back in this order:

United Kingdom
Ireland

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:

Ireland
United Kingdom

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.

"Uncaught TypeError: undefined is not a function"

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.

ISO code as option value

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>

Support dropdown list along with the autocomplete

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.

Issue when using jquery ui greater than 1.8.23

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.

"Member not found" Error

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,

Vince

Latest version (1.0.9) fails on IE10 and below

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.

Text autoselect on input mouse click

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

Demo: http://jsfiddle.net/serialc/SfYDY/

Configure values with external datas

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:

put data in an external file,
remove strong coupling between HTML and datas,
reuse data across different forms,
create, share and reuse common values, like Country values etc,

What do you think ?

Registar onChange event

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

            })

Doesn't Fire Change() events

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.

Unable to delete once an option is selected

On this page:

http://baymard.com/labs/country-selector

If you

select a country, but then
delete the text,
it goes back to showing the placeholder and the value of the input element being empty. However, on the example with the git repository, as well I what I currently have, there is no way to go back to having nothing selected once something is selected. I tried to look at the source of that page and tried a few things, but for the particular case we use it in, the country needs to be able to be removed.

Triggering change-Event on the select

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.

data-relevancy-booster on United Kingdom

Test case 1

Use index.html demo in commit 92e494e
Type in 'ire'

(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'.

Test case 2

Use index.html demo in commit 92e494e
Type in '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'.

Thoughts

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.

Blur in 1.0.5 can erase input content

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

Created Input Element Does Not Define a Type

This might be intentional, but it seems that the field should have type='text' defined.

Support multiple selections

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.

Selected attribute incorrect when 2 or more options have the same value

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.

c.curCSS Is Not A Function

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.

Is there way to limit the amount of results?

It would be great to have an option of limiting the output so people would narrow their matches quicker.

Working with Spry Validation

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.

Falls behind content

Trying to figure out why it falls behind content. Z-index adjustments have no effect.

Thanks.

attribute .nodeValue is deprecated

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

Having normal dropdowns in the same form.

Is there an easy way to disable selectToAutocomplete for a specific Select in a form?

Many thanks,
tetsuo73

Highlighting

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

Accept matching alternate spelling when only one option left on loosing focus

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.

Example (month input from 1 to 12)

I enter "5", a single option (05) is presented
I use the mouse to focus on a different element. The input is rejected, even though there was only a single available element and my input exactly matched an alternative spelling

HTML

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

"Taiwan, Province of China"

Calling Taiwan a Province of China is not very politically neutral: http://news.bbc.co.uk/1/hi/world/asia-pacific/4308678.stm

More info: http://en.wikipedia.org/wiki/Republic_of_China

Value restrictions and data validation

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?

Should boost beginning of word partial matches over inner-word matches

Typing in "Sw" currently gives botswana a favorable ranking over Sweden.

Ordering, typing 'Ireland'

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.

Matching of non-accented letters to accented letters

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?

A blank search of more than 11 options displays out of order

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.

disabled select fields not disabled

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:

FLD025 is the Address Type, FLD032 is the Country field and FLD033 is the Country Code field.

Add LICENSE.txt to root of project

I suggest choosing to multi-license under a broad set:

GPLv2 and later
MIT

maybe some others?

How to open the dropdown when focus?

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?

FF - Empty space at bottom of site: height of ul.ui-autocomplete added to bottom of document

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?

Settings don't work with multiple instances on 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.

Best way to update the selection?

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.

Best way to handle updating the options and removing the autocomplete

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?

default input value / placeholder without html5

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

Doesn't work on Firefox for Android

Hey,

II tried the demo on Firefox for Android 33.0 Beta, and it doesn't auto-complete.

will not work with jquery 1.9+

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

Uncaught TypeError: Cannot read property 'msie' of undefined

"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.

Plugin doesn't work in IE 8 & 9 with older jquery

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

Not working in Android browser

I'm on froyo, using the default (webkit) mobile browser. I get the input field, but no auto-complete.

Strict relevancy does not play its role

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

Spurious reference to jQuery.tooltip in code

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.

Downloaded demo scripts do not work correctly for IE 8 and Firefox. However the demo website does work correctly. IE 8 and Firefox show as a physical select box.