Самый эффективный способ поиска большого многопользовательского набора данных JSON?

Question

Каков наиболее эффективный способ поиска большого набора данных JSON (до 27 тыс. Записей) с помощью jQuery или JS. Я хотел бы создать поле поиска, в котором запускается функция keyup.

Поэтому, если пользователи начинают вводить данные, они возвращают все значения, соответствующие title, а также ссылку на этот заголовок.

My JSON вложен в алфавитном порядке A-Z. Пример ниже

"Numbers": [ 
    { 
    "Title": "20th Century Period Pieces", 
    "Link": "#" 
    }, 
    { 
    "Title": "20th Century", 
    "Link": "#" 
    } 
], 
"A": [ 
    { 
    "Title": "Action Comedies", 
    "Link": "#" 
    }, 
    { 
    "Title": "Action", 
    "Link": "#" 
    } 
], 
"B": [ 
    { 
    "Title": "British", 
    "Link": "#" 
    }, 
    { 
    "Title": "Borderline", 
    "Link": "#" 
    } 
], 
// And so forth 

Я знаю, это может привести к браузеру замерзают поиск такого большого списка на каждом KeyUp, так что я, возможно, придется вернуться к кнопке поиска и загрузки анимации.

Любая помощь очень ценится.

Answer 1

Вы можете реализовать структуру дерева, которая позволит вам выполнять поиск более эффективно, поэтому я не думаю, что это то, что вы хотите сделать. У вас также может быть бэкэнд, который обрабатывает поиск и дает результаты, вот что я сделал бы. Поэтому PHP обрабатывает поисковый запрос и возвращает новый набор JSON. Ваш последний вариант - просто заморозить браузер.

Я бы предпочел PHP-решение. Анимация загрузки может просто ждать, пока PHP вернет данные, а затем покажет их. Это использует сервер для обработки запроса, поэтому ничего не замерзнет - на мой взгляд это действительно хорошее решение.

Для пользователя я предлагаю следующее: Зарегистрируйте нажатия клавиш и дайте ему «тайм-аут». Как только пользователь не набрал 500 мс, запросите PHP-скрипт. Вы можете сделать это через XMLHttpRequest и проанализировать результат с помощью JSON.parse. Здесь нет необходимости в jQuery.

Answer 2

Лично я думаю, что вы должны отправить все эти данные клиенту в любом случае, если вы создаете API для данных и фильтруете его с помощью запроса AJAX, который возвращает результат фильтрации. Глядя на ваши данные примера, кажется, что это не зависит от пользователя, поэтому вытащить данные из базы данных/где бы то ни было и кэшировать это, кажется, лучшее решение.

jQueryUI автозаполнения есть пример о том, как достичь этого here

Это их пример, сделав запрос AJAX всякий раз, когда пользователь ввел минимум 3-х символов:

$("#city").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "http://gd.geobytes.com/AutoCompleteCity", 
      dataType: "jsonp", 
      data: { 
      q: request.term 
      }, 
      success: function(data) { 
      response(data); 
      } 
     }); 
     }, 
     minLength: 3, 
     select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.label : 
      "Nothing selected, input was " + this.value); 
     }, 
     open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 

Вы надеваете» t должен использовать jQuery Autocomplete, но вы получаете идею.

Answer 3

Создайте карту со структурой, которая легче искать

var map = []; 

(function _search(o) { 
    if (typeof o !== 'object') return; 
    if (Array.isArray(o)) { 
     o.forEach(function(item) { _search(item) }); 
    } else if ('Title' in o) { 
     map.push(o); 
    } else { 
     for (var key in o) { 
      if (typeof o[key] === 'object') { 
       if (Array.isArray(o[key])) { 
        o[key].forEach(function(item) { _search(item) }); 
       } else { 
        _search(o[key]); 
       } 
      } 
     } 
    } 
}(obj)); 

Тогда вы можете просто фильтр карту

var result = map.filter(function(obj) { 
    return obj.Title.toLowerCase().indexOf(SearchValue.toLowerCase()) === 0; 
}); 

FIDDLE