I have wrote this function that gives me live search in my JSON file.
$(document.body).on("keyup", ".menuSearch", function() {
$(".searchResults").html("");
var searchField = $(".menuSearch").val();
var expression = new RegExp(searchField, "i");
$.getJSON("data2.json", function(data) {
$.each(data, function(key, value) {
if (value.name.search(expression) != -1 || value.age.search(expression) != -1) {
$("#searchResults").append(
'<li class="list-group-item" style="min-width: 95%;">' +
'<p>' +
value.name + '</p>' +
'<p>' + value.age + '</p>' + '</li>');
}
});
});
});
However, it only works on my test JSON file that looks like this:
[{
"name": "monir",
"age": "23"
},
{
"name": "adam",
"age": "23"
},
{
"name": "mounsif",
"age": ""
},
{
"name": "ivan",
"age": "20"
}
]
But the the actual JSON file that i want to search has a structure like this:
[
{
"link": { "title": "Applications" },
"has_children": true,
"subtree": [
{
"link": { "title": "Projects" },
"subtree": [
{
"link": { "title": "WORK\/NEW YORK" }
},
{
"link": { "title": "WORK\/NEW JERSEY" }
}
]
}
]
},
{
"link": { "title": "Operations" },
"has_children": true,
"subtree": [
{
"link": { "title": "Projects" },
"subtree": [
{
"link": { "title": "WORK\/DALLAS" },
"subtree": [
{
"link": { "title": "WORK\/DALLAS 1.1" },
"subtree": [
{
"link": { "title": "WORK\/DALLAS 1.1.1" }
},
{
"link": { "title": "WORK\/DALLAS 1.1.2" }
}
]
},
{
"link": { "title": "WORK\/DALLAS 1.2" }
}
]
}
]
}
]
}
];
I am very new to JQUERY and AJAX and i do not know how to amend the code I wrote above to iterate on the above JSON file? will be kind enough to comment the code so i can learn something?
Thank you
Aucun commentaire:
Enregistrer un commentaire