【发布时间】：2017-02-20 23:13:00
【问题描述】：
我有一个下拉列表 - 国家，由 jquery 生成，选择后会将所选国家下的所有城市加载到另一个 UL 中。我为第二个 UL 添加了搜索功能；每当我输入任何字母时，都需要很长时间才能响应，并且有时会导致浏览器崩溃。我该如何处理。
对于那些城市数量最少的国家，第二个搜索功能非常好用，只是当遇到像中国，美国，英国等大国时，搜索/过滤功能会导致崩溃。
需要有关如何使搜索/过滤器正常运行的建议。
$(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">×</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">×</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();
}
【问题讨论】：
-
您的代码有语法错误。请改正。 - 这是无效的：
$(document).ready(function() { origin_dropdown(); } -
我建议您创建一个连接的 html 字符串并注入它，而不是创建新对象并附加它们
-
@mplungjan，对不起，我不明白什么是连接的html字符串，脚本可以正常运行而没有任何错误，只是过滤功能会导致浏览器崩溃。
标签： jquery performance laravel-5.3