html5 - Filter a Select menu with jQuery -


i read nice tutorial, explain, how filter select menu. works nice jquery-1.9.1, need mobile version of web-application, add in html:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

full index.html:

<meta charset="utf-8"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />   <div data-role="fieldcontain">     <label for="search">search input:</label>     <input type="search" id="search" /><br/> </div>  <div data-role="fieldcontain"> <label for="metro" class="select">Ст. метро:</label> <select name="metro" id="metro" data-native-menu="false"> <option value="country..." data-default="true">country...</option> <option value="afganistan">afganistan</option> <option value="albania">albania</option> <option value="algeria">algeria</option> <option value="american samoa">american samoa</option> <option value="andorra">andorra</option> <option value="angola">angola</option> <option value="anguilla">anguilla</option> <option value="antigua &amp; barbuda">antigua &amp; barbuda</option> <option value="argentina">argentina</option> <option value="armenia">armenia</option> <option value="aruba">aruba</option> <option value="australia">australia</option> <option value="austria">austria</option> <option value="azerbaijan">azerbaijan</option> <option value="bahamas">bahamas</option> <option value="bahrain">bahrain</option> <option value="bangladesh">bangladesh</option> <option value="barbados">barbados</option> <option value="belarus">belarus</option> <option value="belgium">belgium</option> <option value="belize">belize</option> <option value="benin">benin</option> <option value="bermuda">bermuda</option> <option value="bhutan">bhutan</option> <option value="bolivia">bolivia</option> <option value="bonaire">bonaire</option> <option value="bosnia &amp; herzegovina">bosnia &amp; herzegovina</option> <option value="botswana">botswana</option> <option value="brazil">brazil</option> <option value="british indian ocean ter">british indian ocean ter</option> <option value="brunei">brunei</option> <option value="bulgaria">bulgaria</option> <option value="burkina faso">burkina faso</option> <option value="burundi">burundi</option> <option value="cambodia">cambodia</option> <option value="cameroon">cameroon</option> <option value="canada">canada</option> <option value="canary islands">canary islands</option> <option value="cape verde">cape verde</option> <option value="cayman islands">cayman islands</option> <option value="central african republic">central african republic</option> <option value="chad">chad</option> <option value="channel islands">channel islands</option> <option value="chile">chile</option> <option value="china">china</option> <option value="christmas island">christmas island</option> <option value="cocos island">cocos island</option> <option value="colombia">colombia</option> <option value="comoros">comoros</option> <option value="congo">congo</option> <option value="cook islands">cook islands</option> <option value="costa rica">costa rica</option> <option value="cote divoire">cote d'ivoire</option> <option value="croatia">croatia</option> <option value="cuba">cuba</option> <option value="curaco">curacao</option> <option value="cyprus">cyprus</option> <option value="czech republic">czech republic</option> <option value="denmark">denmark</option> <option value="djibouti">djibouti</option> <option value="dominica">dominica</option> <option value="dominican republic">dominican republic</option> <option value="east timor">east timor</option> <option value="ecuador">ecuador</option> <option value="egypt">egypt</option> <option value="el salvador">el salvador</option> <option value="equatorial guinea">equatorial guinea</option> <option value="eritrea">eritrea</option> <option value="estonia">estonia</option> <option value="ethiopia">ethiopia</option> <option value="falkland islands">falkland islands</option> <option value="faroe islands">faroe islands</option> <option value="fiji">fiji</option> <option value="finland">finland</option> <option value="france">france</option> <option value="french guiana">french guiana</option> <option value="french polynesia">french polynesia</option> <option value="french southern ter">french southern ter</option> <option value="gabon">gabon</option> <option value="gambia">gambia</option> <option value="georgia">georgia</option> <option value="germany">germany</option> <option value="ghana">ghana</option> <option value="gibraltar">gibraltar</option> <option value="great britain">great britain</option> <option value="greece">greece</option> <option value="greenland">greenland</option> <option value="grenada">grenada</option> <option value="guadeloupe">guadeloupe</option> <option value="guam">guam</option> <option value="guatemala">guatemala</option> <option value="guinea">guinea</option> <option value="guyana">guyana</option> <option value="haiti">haiti</option> <option value="hawaii">hawaii</option> <option value="honduras">honduras</option> <option value="hong kong">hong kong</option> <option value="hungary">hungary</option> <option value="iceland">iceland</option> <option value="india">india</option> <option value="indonesia">indonesia</option> <option value="iran">iran</option> <option value="iraq">iraq</option> <option value="ireland">ireland</option> <option value="isle of man">isle of man</option> <option value="israel">israel</option> <option value="italy">italy</option> <option value="jamaica">jamaica</option> <option value="japan">japan</option> <option value="jordan">jordan</option> <option value="kazakhstan">kazakhstan</option> <option value="kenya">kenya</option> <option value="kiribati">kiribati</option> <option value="korea north">korea north</option> <option value="korea sout">korea south</option> <option value="kuwait">kuwait</option> <option value="kyrgyzstan">kyrgyzstan</option> <option value="laos">laos</option> <option value="latvia">latvia</option> <option value="lebanon">lebanon</option> <option value="lesotho">lesotho</option> <option value="liberia">liberia</option> <option value="libya">libya</option> <option value="liechtenstein">liechtenstein</option> <option value="lithuania">lithuania</option> <option value="luxembourg">luxembourg</option> <option value="macau">macau</option> <option value="macedonia">macedonia</option> <option value="madagascar">madagascar</option> <option value="malaysia">malaysia</option> <option value="malawi">malawi</option> <option value="maldives">maldives</option> <option value="mali">mali</option> <option value="malta">malta</option> <option value="marshall islands">marshall islands</option> <option value="martinique">martinique</option> <option value="mauritania">mauritania</option> <option value="mauritius">mauritius</option> <option value="mayotte">mayotte</option> <option value="mexico">mexico</option> <option value="midway islands">midway islands</option> <option value="moldova">moldova</option> <option value="monaco">monaco</option> <option value="mongolia">mongolia</option> <option value="montserrat">montserrat</option> <option value="morocco">morocco</option> <option value="mozambique">mozambique</option> <option value="myanmar">myanmar</option> <option value="nambia">nambia</option> <option value="nauru">nauru</option> <option value="nepal">nepal</option> <option value="netherland antilles">netherland antilles</option> <option value="netherlands">netherlands (holland, europe)</option> <option value="nevis">nevis</option> <option value="new caledonia">new caledonia</option> <option value="new zealand">new zealand</option> <option value="nicaragua">nicaragua</option> <option value="niger">niger</option> <option value="nigeria">nigeria</option> <option value="niue">niue</option> <option value="norfolk island">norfolk island</option> <option value="norway">norway</option> <option value="oman">oman</option> <option value="pakistan">pakistan</option> <option value="palau island">palau island</option> <option value="palestine">palestine</option> <option value="panama">panama</option> <option value="papua new guinea">papua new guinea</option> <option value="paraguay">paraguay</option> <option value="peru">peru</option> <option value="phillipines">philippines</option> <option value="pitcairn island">pitcairn island</option> <option value="poland">poland</option> <option value="portugal">portugal</option> <option value="puerto rico">puerto rico</option> <option value="qatar">qatar</option> <option value="republic of montenegro">republic of montenegro</option> <option value="republic of serbia">republic of serbia</option> <option value="reunion">reunion</option> <option value="romania">romania</option> <option value="russia">russia</option> <option value="rwanda">rwanda</option> <option value="st barthelemy">st barthelemy</option> <option value="st eustatius">st eustatius</option> <option value="st helena">st helena</option> <option value="st kitts-nevis">st kitts-nevis</option> <option value="st lucia">st lucia</option> <option value="st maarten">st maarten</option> <option value="st pierre &amp; miquelon">st pierre &amp; miquelon</option> <option value="st vincent &amp; grenadines">st vincent &amp; grenadines</option> <option value="saipan">saipan</option> <option value="samoa">samoa</option> <option value="samoa american">samoa american</option> <option value="san marino">san marino</option> <option value="sao tome & principe">sao tome &amp; principe</option> <option value="saudi arabia">saudi arabia</option> <option value="senegal">senegal</option> <option value="seychelles">seychelles</option> <option value="sierra leone">sierra leone</option> <option value="singapore">singapore</option> <option value="slovakia">slovakia</option> <option value="slovenia">slovenia</option> <option value="solomon islands">solomon islands</option> <option value="somalia">somalia</option> <option value="south africa">south africa</option> <option value="spain">spain</option> <option value="sri lanka">sri lanka</option> <option value="sudan">sudan</option> <option value="suriname">suriname</option> <option value="swaziland">swaziland</option> <option value="sweden">sweden</option> <option value="switzerland">switzerland</option> <option value="syria">syria</option> <option value="tahiti">tahiti</option> <option value="taiwan">taiwan</option> <option value="tajikistan">tajikistan</option> <option value="tanzania">tanzania</option> <option value="thailand">thailand</option> <option value="togo">togo</option> <option value="tokelau">tokelau</option> <option value="tonga">tonga</option> <option value="trinidad &amp; tobago">trinidad &amp; tobago</option> <option value="tunisia">tunisia</option> <option value="turkey">turkey</option> <option value="turkmenistan">turkmenistan</option> <option value="turks &amp; caicos is">turks &amp; caicos is</option> <option value="tuvalu">tuvalu</option> <option value="uganda">uganda</option> <option value="ukraine">ukraine</option> <option value="united arab erimates">united arab emirates</option> <option value="united kingdom">united kingdom</option> <option value="united states of america">united states of america</option> <option value="uraguay">uruguay</option> <option value="uzbekistan">uzbekistan</option> <option value="vanuatu">vanuatu</option> <option value="vatican city state">vatican city state</option> <option value="venezuela">venezuela</option> <option value="vietnam">vietnam</option> <option value="virgin islands (brit)">virgin islands (brit)</option> <option value="virgin islands (usa)">virgin islands (usa)</option> <option value="wake island">wake island</option> <option value="wallis &amp; futana is">wallis &amp; futana is</option> <option value="yemen">yemen</option> <option value="zaire">zaire</option> <option value="zambia">zambia</option> <option value="zimbabwe">zimbabwe</option> </select> </div>   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script> $(document).ready(function() {  jquery.fn.filterbytext = function(textbox) {     return this.each(function() {         var select = $(this);         var options = [],             defaultoption = '';          select.find('option').each(function() {             var elm = $(this);             if(elm.data('default') != true)             {                 options.push({value: elm.val(), text: elm.text()});             }             else             {                 defaultoption = elm.text();             }         });          $(textbox).bind('change keyup', function() {             select.empty();             var search = $.trim($(this).val());             var regex = new regexp(search,"gi");              if(search == '')             {                 select.append($('<option>').text(defaultoption).prop('selected', true));             }             $.each(options, function(i) {                 var option = options[i];                 if(option.text.match(regex) !== null) {                     select.append(                         $('<option>').text(option.text).val(option.value)                     );                 }             });         });     }); };     $(function() {       $('#metro').filterbytext($('#search'), true);     });  });  </script> 

without mobile js - works, so, think, problem in jquery.mobile-1.3.2.min.js.

how fix it? thanks.

when using jquery mobile widgets, after page loaded , inserted dom, widgets enhanced. enhancement happens between pagecreate , pageinit events. if programmatically change items of widget after enhancement step, must trigger enhancement of widget. need call 'refresh' method on widget. because using selectmenu widget, after change of options have call refresh method in next way:

select.selectmenu('refresh'); 

here jsfiddle


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -