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

请注意，列表视图中的第一项具有不同的样式表（具有data-theme = \“ b \”参数）还请注意，由于硬件限制，我不能使用ES6。请使用jquery和纯javascript作为答案。您可以使用.map lodash或任何其他数据类型与特定的CSS进行转换。

请注意，我的列表视图是根据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

如何将lodash对象（过滤器对象）动态转换为jquery的listview

1 个答案: