javascript - 如何动态地将 lodash 对象(过滤器对象)转换为 jquery 的 ListView

Question

作为第一步使用本主题的答案 how to case insentive contain search with lodash

我的下一步是(我的第二个目标)我使用过滤器返回通过 json 文件搜索的所有包含匹配项。我的目标是遍历所有匹配项并将每个 lodash 对象转换为具有特定 css 格式的 jquery listViews 的排序列表项。

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

请注意 ListView 中的第一项具有不同的样式表(具有 data-theme=\"b\"参数) 另请注意，由于硬件限制，我无法使用 ES6。请使用 jquery 和纯 javascript 来回答你的问题。您可以使用 .map lodash 或任何其他数据类型来转换特定的 css。

请注意我的 ListView 是从 javascript 代码动态填写的

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

Answer 1

你正在处理一个数组，所以你可以使用 lodash isEmpty 来检查它是否有任何元素。此外，您不需要使用单独的计数器来跟踪索引，因为 jquery 映射(并且任何 map 都将索引作为其第二个参数)。

你可以试试这样的:

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

可以看到working here