在没有AJAX的情况下搜索JSON数据
Search through JSON data without AJAX
我有一个巨大的JSON文件,我一直在使用JavaScript和AJAX进行搜索。我正在使用实时搜索,以便在每次按下键后,JavaScript搜索整个JSON文档并返回与搜索字段中的内容匹配的结果。
问题是,每次我按下一个键,整个JSON文件被服务器请求,这导致数据使用量真的很快增加。
是否有一种方法可以将整个JSON文件下载到本地机器,然后对其进行搜索?
我一直使用JQuery的$.getJSON()
作为解释JSON文件的一种手段。
我想要一个解决方案,使修改现有代码的次数尽可能少。
我在想,也许复制JSON到HTML文件将工作最好,因为它将全部下载一旦页面加载,我可以从它的HTML内搜索。虽然我不知道该怎么做。
下面是我的JSON数据的样子:(除了有近500个这样的数据)
{"profiles": [
{
"first_name": "Robert",
"last_name": "Hosking",
"img_url": "img/about/profile.jpg",
"major": "Computer Science",
"cohort": 12,
"bio": "eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi",
"linkedin": "http://linkedin.com",
"home_town": "Rutherfordton, NC",
"status": "Student"
}]
这是我的搜索函数看起来像:(有一个输入字段与id="search"
在我的HTML)
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('/profiles.json', function(data){
var result =""
$.each(data.profiles, function(key, val){
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1)||
(cohortNum.search(myExp) != -1)||
(cohortName.search(myExp) != -1)
){
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
位Mustache.render(template, val)
只是将JSON数据从一个名为mustache.js的库馈送到JavaScript模板中。
提前感谢!
使用getJSON是Promise
的事实
var someGlobalData = $.getJSON('/profiles.json'); // add this somewhere global
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
someGlobalData.then(function(data) { // change this one line
var result = ""
$.each(data.profiles, function(key, val) {
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1) ||
(cohortNum.search(myExp) != -1) ||
(cohortName.search(myExp) != -1)
) {
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
相关文章:
- 在禁用ng的情况下搜索JSON对象(AngularJS)
- 使用ng类(AngularJS)搜索JSON对象
- 自动完成功能,用于按属性搜索 json 对象
- 如何搜索 json 结构
- 如何在jQuery中搜索JSON
- 搜索 JSON 数组
- 根据变量搜索 JSON 数组
- 递归搜索 JSON 并删除某些子对象
- 使用jQuery提高搜索JSON对象的性能
- 将Multiple Var输入函数,搜索JSON数组,并将Multiple Array Val作为输出接收
- 用于搜索JSON数据的自定义筛选器
- 在JavaScript中搜索Json
- 如何在JavaScript中搜索JSON数组中的特定参数
- 使用jQuery循环浏览twitter搜索JSON
- 搜索JSON以查找特定值
- TypeAhead和Bloodhound只搜索JSON数组中的第一个单词
- 使用JQuery搜索JSON对象
- 使用从下拉菜单输入的用户日期搜索JSON
- 在ember.js中搜索JSON数据
- 二进制搜索JSON对象