为什么在键入单词以搜索CSV中的数据时,搜索框会变得滞后? [英] Why searchbox become lagging when typing word to search data in CSV?
问题描述
我使用开放的街道地图和传单开发了商店定位器。问题是,当我想输入搜索框时,它将变得滞后以完成这个词。该商店定位器从具有300 ++数据的CSV文件中读取。以下是搜索框的代码:
I developed the store locator using open street map and leaflet. The problem is when I want to type in searchbox it will become lagging to finish the word. That store locator read from the CSV file that has 300++ data. Below is the code for the searchbox:
var locationLat = [];
var locationLng = [];
var locMarker;
var infoDiv = document.getElementById('storeinfo');
var infoDivInner = document.getElementById('infoDivInner');
var toggleSearch = document.getElementById('searchIcon');
var hasCircle = 0;
var circle = [];
//close store infor when x is clicked
var userLocation;
$("#infoClose").click(function() {
$("#storeinfo").hide();
if (map.hasLayer(circle)) {
map.removeLayer(circle);
}
});
var listings = document.getElementById('listingDiv');
var stores = L.geoJson().addTo(map);
var storesData = omnivore.csv('assets/data/table_1.csv
function setActive(el) {
var siblings = listings.getElementsByTagName('div');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
}
el.className += ' active';
}
function sortGeojson(a,b,prop) {
return (a.properties.name.toUpperCase() < b.properties.name.toUpperCase()) ? -1 : ((a.properties.name.toUpperCase() > b.properties.name.toUpperCase()) ? 1 : 0);
}
storesData.on('readyunction() {
var storesSorted = storesData.toGeoJSON();
//console.log(storesSorted);
var sorted = (storesSorted.features).sort(sortGeojson)
//console.log(sorted);
storesSorted.features = sorted;
//console.log(storesSorted)
stores.addData(storesSorted);
map.fitBounds(stores.getBounds());
toggleSearch.onclick = function() {
//var s = document.getElementById('searchbox');
//if (s.style.display != 'none') {
//s.style.display = 'yes';
//toggleSearch.innerHTML = '';
//$("#search-input").val("");
//search.collapse();
//document.getElementById('storeinfo').style.display = 'none';
//$('.item').show();
//} else {
//toggleSearch.innerHTML = '';
//s.style.display = 'block';
//attempt to autofocus search input field when opened
//$('#search-input').focus();
//}
};
stores.eachLayer(function(layer) {
//New jquery search
$('#searchbox').on('change paste keyup', function() {
var txt = $('#search-input').val();
$('.item').each(function() {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
有没有解决这个问题的方法?我一直在寻找解决方案来解决这个问题,但仍然无法找到解决方案。谢谢
我尝试过的方法:
我试过学习使用bootstrap搜索表,但我确实知道如何申请这个商店定位器。
Is there any way to solve this problem? I've been searching solution to solve this but still cannot find the solution. Thank you
What I have tried:
I tried learn to use bootstrap search table but i did know how to apply in this store locator.
推荐答案
(#infoClose)。click(function(){
("#infoClose").click(function() {
(#storeinfo)。hide();
if(map.hasLayer( circle)){
map.removeLayer(circle);
}
});
var listings = document.getElementById('listingDiv');
var stores = L.geoJson()。addTo(map);
var storesData = omnivore.csv('assets / data / table_1.csv
function setActive(el){
var siblings = listings.getElementsByTagName('div');
for (var i = 0; i< siblings.length; i ++){
siblings [i] .className = siblings [i] .className
.replace(/ active /,'')。replace( / \\\ *
("#storeinfo").hide(); if (map.hasLayer(circle)) { map.removeLayer(circle); } }); var listings = document.getElementById('listingDiv'); var stores = L.geoJson().addTo(map); var storesData = omnivore.csv('assets/data/table_1.csv function setActive(el) { var siblings = listings.getElementsByTagName('div'); for (var i = 0; i < siblings.length; i++) { siblings[i].className = siblings[i].className .replace(/active/, '').replace(/\s\s*
/,'');
}
el.className + ='active';
}
函数sortGeojson(a,b,prop){
return(a.properties.name.toUpperCase()< b.properties.name.toUpperCase())? - 答:((a .properties.name.toUpperCase()> b.properties.name.toUpperCase())?1:0);
}
storesData.on('readyunction(){
var storesSorted = storesData.toGeoJSON();
//console.log(storesSorted);
var sorted =(storesSorted.features).sort(sortGeojson)
/ /console.log(sorted);
storesSorted.features = sorted;
//console.log(storesSorted)
stores.addData(storesSorted);
map.fitBounds(stores.getBounds());
toggleSearch.onclick = function(){
// var s = document.getElementById('searchbox');
// if(s.style.display!='none'){
//s.style.display ='yes';
//toggleSearch.innerHTML =' ';
//
/, ''); } el.className += ' active'; } function sortGeojson(a,b,prop) { return (a.properties.name.toUpperCase() < b.properties.name.toUpperCase()) ? -1 : ((a.properties.name.toUpperCase() > b.properties.name.toUpperCase()) ? 1 : 0); } storesData.on('readyunction() { var storesSorted = storesData.toGeoJSON(); //console.log(storesSorted); var sorted = (storesSorted.features).sort(sortGeojson) //console.log(sorted); storesSorted.features = sorted; //console.log(storesSorted) stores.addData(storesSorted); map.fitBounds(stores.getBounds()); toggleSearch.onclick = function() { //var s = document.getElementById('searchbox'); //if (s.style.display != 'none') { //s.style.display = 'yes'; //toggleSearch.innerHTML = ''; //
这篇关于为什么在键入单词以搜索CSV中的数据时,搜索框会变得滞后?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!