2番目の検索ボックスで結果が表示されるまでに時間がかかりすぎ、ブラウザがクラッシュすることがある

Question

jqueryによって生成された国とドロップダウンリストがあり、選択した国のすべての都市が別のULに読み込まれます。 2番目のULの検索機能を追加しました。アルファベットを入力するたびに応答するのに時間がかかり、ブラウザクラッシュにつながることがあります。どうすればそれを処理できますか？

都市の数が最も少ない国では、2番目の検索機能が完璧に機能します。ちょうど中国、米国、英国などの巨大な国に来ると、検索/フィルタ機能がクラッシュします。

は、検索/フィルタ機能を適切に行う方法に関するアドバイスが必要です。

$(document).ready(function() { 
     origin_dropdown(); 
    } 

    function myFunction(e) { 
     name = e; 
     $("." + e + "_dropdown").toggle(); 
     //document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    function filterFunction(e) { 
     var input, filter, ul, li, a, i; 
     name = e; 
     input = $(".input_" + e).val(); 
     filter = input.toUpperCase(); 
     a = $("." + e + "_dropdown").find("li"); 

     for (i = 0; i < a.length; i++) { 
     if (a[i].innerText.toUpperCase().indexOf(filter) > -1) { 
      $(a[i]).show(); 
     } else { 
      $(a[i]).hide(); 
     } 
     } 
    } 

    function filterFunction_cities(e) { 
     var input, filter, ul, li, a, i; 
     name = e; 
     input = $(".input_" + e).val(); 
     filter = input.toUpperCase(); 
     a = $("#origin_cities_list").find("li"); 

     for (i = 0; i < a.length; i++) { 
     if (a[i].innerText.toUpperCase().indexOf(filter) > -1) { 
      $(a[i]).show(); 
     } else { 
      $(a[i]).hide(); 
     } 
     } 
    } 

    function origin_dropdown() { 
     $.ajax({ 
     url: "/advance/origin", 
     type: 'POST', 
     dataType: 'json', 
     success: function(data) { 
      $(data.result).each(function(key, value) { 
      name = value.country_name.replace(/ /g, "_"); 
      //cities = value.full_name_nd.replace(/ /g,"_"); 
      list = $("<li>").addClass(name).text(value.country_name); 
      cbox = $("<input>").addClass(name).attr("type", "checkbox").val(value.country_name).click(function() { 
       selected_cBox = $(this).val(); 
       new_div = $("<div>").addClass("selected_origin").text(selected_cBox); 
       $('.selected_container').append(new_div); 

       var tmp = { 
       'country': [] 
       }; 
       tmp['country'].push(selected_cBox); 
       console.log(tmp); 
       // to get cities within the selected country and append to list 
       $.ajax({ 
       url: "/advance/origin_cities", 
       type: 'POST', 
       data: tmp, 
       dataType: 'json', 
       success: function(data) { 
        $(data.result).each(function(key, value) { 
        city_name = value.full_name_nd.replace(/ /g, "_"); 
        country_name = value.country_name.replace(/ /g, "_"); 
        list = $("<li>").addClass(value.country_name, city_name).text(value.full_name_nd); 
        cbox = $("<input>").addClass(value.country_name, city_name).attr("type", "checkbox").val(value.full_name_nd).click(function() { 
         selected_cBox = $(this).val(); 
         new_div = $("<div>").addClass("selected_origin").text(selected_cBox); 
         $('.selected_container').append(new_div); 
        }) 
        combine = list.prepend(cbox); 
        $('#origin_cities_list').append(combine); 
        }) 
       } 
       }) 
      }); 
      combine = list.prepend(cbox); 
      $('#origin_list').append(combine); 
      }) 
     } 
     }); 
    } 

<div id="myModal_origin" class="modal"> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <div class="dropdown_origin"> 
     <button onclick="myFunction('origin')" class="dropbtn">Country of Origin</button> 
     <div id="myDropdown" class="dropdown-content origin_dropdown"> 
     <input type="text" placeholder="Search.." id="myInput" class="input_origin" onkeyup="filterFunction('Origin')"> 
     <ul id="origin_list" class="dynamic_list"> 
     </ul> 
     <ul id="origin_cities_list" class="dynamic_list"> 
      <input type="text" placeholder="Search.." id="myInput" class="input_cities" onkeyup="filterFunction_cities('Cities')"> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

私は私のjQueryの洗練と私は前のコードは、都市のためのAjaxの呼び出し保つ見られるような問題を解決しようとしています。

以下

私の新しいコードが、イムはまだ

function origin_dropdown(){ 
$.ajax({ 
    url:"/advance/origin", 
    type:'POST', 
    dataType:'json', 
    success: function(data){ 
     $(data.result).each(function(key,value){ 
      name = value.country_name.replace(/ /g,"_"); 
      //cities = value.full_name_nd.replace(/ /g,"_"); 
      list = $("<li>").addClass(name).text(value.country_name); 
      cbox = $("<input>").addClass(name).addClass("_country").attr("type","checkbox").val(value.country_name); 
      combine = list.prepend(cbox); 
      $('#origin_list').append(combine); 
     }); 
    } 
}) 
} 

function Origin_cities_dropdown(ctry){ 

$(".origin_dropdown").toggle(); 
var tmp = {'country':[]}; 
tmp['country'].push(ctry); 
console.log(tmp); 

$.ajax({ 
    url:"/advance/origin_cities", 
    type:'POST', 
    data:tmp, 
    dataType:'json', 
    success: function(data){ 
     console.log("success"); 
     $(data.result).each(function(key,value){   
      city_name = value.full_name_nd.replace(/ /g,"_"); 
      country_name = value.country_name.replace(/ /g,"_"); 
      list = $("<li>").addClass(value.country_name, city_name).text(value.full_name_nd); 
      cbox = $("<input>").addClass(value.country_name, city_name).attr("type","checkbox").val(value.full_name_nd).click(function(){ 
       selected_cBox = $(this).val(); 
       new_div = $("<div>").addClass("selected_origin").text(selected_cBox); 
       $('.selected_container').append(new_div); 
      }) 
      combine = list.prepend(cbox); 
      $('#origin_cities_list').append(combine); 
     }) 
    } 
}) 
} 

<!--Location Selection Modal--> 
     <div id="myModal_origin" class="modal"> 
      <div class="container"> 
       <div class="row"> 
        <div class="row modal-content"> 
         <span class="close">&times;</span> 
          <div class="dropdown_origin col-sm-12 col-md-12 centered"> 
           <div class="col-sm-12 col-md-12 centered"><p>Country of Origin</p></div> 
           <input onclick="myFunction('origin')" class="dropbtn" readonly></input> 
           <input type="text" placeholder="Search.." id="myInput" class="input_origin" onkeyup="filterFunction('Origin')" style="display: none;"> 
           <input type="text" placeholder="Search.." id="myInput" class="input_cities" onkeyup="filterFunction_cities('Cities')" style="display: none;"> 
           <div id="myDropdown" class="dropdown-content origin_dropdown col-sm-12 col-md-12 centered">       
            <ul id="origin_list" class="dynamic_list"> 
            </ul> 
           </div>   
           <div id="myDropdown" class="dropdown-content cities_dropdown col-sm-12 col-md-12 centered">   
            <ul id="origin_cities_list" class="dynamic_list"> 

            </ul> 
           </div> 
          </div> 
        </div> 
       </div> 
      </div> 
     </div> 

$(document).ready(function() { 
    origin_dropdown(); 
} 

Answer 1

同じ問題を取得しているこれは速く

success: function(data) { 
    var html = []; 
    $(data.result).each(function(key, value) { 
    city_name = value.full_name_nd.replace(/ /g, "_"); 
    country_name = value.country_name.replace(/ /g, "_"); 
    html.push('<li class="'+value.country_name +" " + city_name+">'+value.full_name_nd+'<input class="'+value.country_name +" "+ city_name +' type="checkbox" value="'+value.full_name_nd+'"/>'); 
    }) 
    $("#origin_cities_list").append(html.join('')); 
}