Pfthb

as using answer of this topic for the first step
how to case insentive contain search with lodash

my next step is (my second goal) i use filter to return all the contain matches searched through json file. my goal is to iterate through all matches and convert each lodash object to order list item of jquery listViews with the specific css format.

 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');
 
);

please note the first item in the listview has different stylesheet (has data-theme="b" parameter)
also please note because of hardware limitation i can't use ES6. please use jquery and pure javascript for your answers. you can use .map lodash or any other data types to convert with specific css.

please note my listview filled out dynamically from javascript code

 <input id='input' type='text' placeholder="Search term">
 <ol id="listUl" data-role="listview" data-icon="false" style="margin-right: 5px;">

You are dealing with an array so you can use lodash isEmpty to check if it has any items in it. Also you do not need to use a separate counter to track the index since jquery map (and any map has the index as its 2nd argument).

You can try something like this:

 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);
 if (_.isEmpty(result)) 
 console.log('Nothing found');
 else 
 listHTML = $.map(result, function(entry, i) 
 if (i == 0) 
 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');
 
 );

You can see it working here