After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and convert them into ordered list items of jQuery listViews with specific CSS formatting.
function search(data, term) {
return _.filter(data, function(x) {
return _.includes(_.toLower(x.title), _.toLower(term))})
}
document.getElementById('input').addEventListener('change', function() {
var name = document.getElementById('input').value;
const data = [{ "video_url": "http://63.237.48.3/ipnx/media/movies/Zane_Ziadi_HQ.mp4", "title": "Zane Ziadi" }, { "video_url": "http://63.237.48.3/ipnx/media/movies/DarBastAzadiHQ.mp4", "title": "Darbast Azadi" }, { "video_url": "http://63.237.48.3/ipnx/media/movies/Cheghadr_Vaght_Dari_HQ.mp4", "title": "Cheghadr Vaght Dari" }, { "video_url": "http://63.237.48.3/ipnx/media/movies/Mashaal_HQ.mp4", "title": "Mashaal" }, { "video_url": "http://63.237.48.3/ipnx/media/movies/Red_Carpet_HQ.mp4", "title": "Red Carpet" } ]
var result = search(data, name); // <-- change to use the new search fn
if (!result) {
console.log('Nothing found');
} else {
console.log('Go to ' + result.video_url);
var ind = 0;
listLength = result.length;
//FIXME
listHTML = $.map(result, function(entry) {
ind++;
//FIXME
if (ind === 1) {
return "<li class=\"itemListClass\" id=\"movieListId\" data-theme=\"b\" style=\"padding-top:25px;padding-left: 15px;line-height:70px\"><a style=\"font-size:1.5em;\" class=\"list\" href='" + entry.video_url + "'>" + entry.title + "</a></li>";
}else {
return "<li class=\"itemListClass\" id=\"movieListId\" style=\"padding-left: 15px;margin-left: 10px;line-height:70px\"><a style=\"font-size:1.5em;\" class=\"list\" href='" + entry.video_url + "'>" + entry.title + "</a></li>";
}
}).join('');
$("#listUl").append(listHTML).listview("refresh").trigger('create');
}
});
It's important to note that the first item in the listview has a different stylesheet with the data-theme="b" parameter. Additionally, due to hardware limitations, ES6 cannot be used. Therefore, please rely on jQuery and pure JavaScript for your solutions. You are allowed to use lodash .map or any other suitable data types for conversion with specific CSS requirements.
Keep in mind that the listview is populated dynamically from the JavaScript code.
<input id='input' type='text' placeholder="Search term">
<ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">