Почему окно поиска становится запаздывающим при наборе слова для поиска данных в CSV? - PullRequest
Новая
       7

Почему окно поиска становится запаздывающим при наборе слова для поиска данных в CSV?

0 голосов
/ 12 октября 2018

Я разработал локатор магазина, используя открытую карту улиц и листовку.Проблема в том, что когда я хочу напечатать в окне поиска, оно станет запаздывающим, чтобы закончить слово.Этот локатор магазина читается из файла CSV, который содержит данные 300 ++.Ниже приведен код для окна поиска: 

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('ready', function() {

  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 = '<i class="fa fa-search"></i>';
      //$("#search-input").val("");

      //search.collapse();
      //document.getElementById('storeinfo').style.display = 'none';
      //$('.item').show();
    //} else {
      //toggleSearch.innerHTML = '<i class="fa fa-times"></i>';
      //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();
        }
      });
    });

Я не знаю, что является причиной задержки в окне поиска.Это что-то не так в коде или файле CSV?Спасибо

1 Ответ

0 голосов
/ 12 октября 2018

Каждая итерация $('.item').each вызывает изменение макета, поскольку $(this).hide() или $(this).show() приводит к удалению / добавлению элемента в DOM, поскольку стиль установлен на display:none вперед и назад.Манипулирование DOM и соответствующие изменения макета обходятся дорого.

Можно рассмотреть возможность накопления изменений и выполнения одного пакетного обновления DOM с помощью функции, подобной appendChild

...