本文介绍了如何将lodash对象(过滤器对象)动态转换为jquery的listview的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

将本主题的答案用于第一步如何区分大小写包含lodash的搜索

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

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

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

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

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.

请注意,我的列表视图是使用javascript代码动态填充的

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;">

推荐答案

您正在处理数组,因此可以使用lodash isEmpty检查其中是否包含任何项目.另外,由于jquery映射(并且任何map都将索引作为其第二个参数),因此您无需使用单独的计数器来跟踪索引.

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).

您可以尝试以下操作:

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

您可以在在此处工作

这篇关于如何将lodash对象(过滤器对象)动态转换为jquery的listview的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-09 14:26
查看更多