时间戳

首页 > 解决方案 > 如何使用 lodash 区分大小写包含搜索

javascript - 如何使用 lodash 区分大小写包含搜索

问题描述

我有一个有效的 json 文件（我只放了其中的一部分）。我想搜索不区分大小写并看起来包含（假设在 json 文件中有一条 Red Carpet 记录，如果用户搜索“red”，它将显示匹配项的 video_url（“Red Carpet 的 video_url”）。我有一个限制，我可以'由于硬件原因，不使用 ES6。请说明我需要如何将以下 json 文件转换为 javascript 对象并使用 jquery 或 javascript 进行包含不区分大小写的搜索。为此，我可以将 lodash 或任何其他 javascript 库添加到我的项目中。

[{
        "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"
    }
]

以下代码不起作用：

  document.getElementById('input').addEventListener('change', function() {

 var name = document.getElementById('input').value.toLowerCase();
    var result = _.find(movies, {'title': name});
    if (!result){
       console.log('Nothing found');
    }else{
         console.log('Go to ' + result.video_url);

    }
    });

编辑2：更新2

由 Akrion 评论修复和解决，非常感谢他

编辑3：更新3

Akrion 的回答似乎是，当搜索字符“a”时，它不会返回所有以 A 为字符的标题，请修改并更正我尝试运行 ES5 部分答案的代码，它只返回 zane ziadi 第一项但不返回“切格哈德·瓦格特·达里”

Edit4: update4 正如 Akrion 在他的评论中建议的那样，我可以使用 filter 而不是 find 来匹配所有搜索。我永远标记他对这个线程的回答

标签： javascriptjqueryarrayssearchlodash

解决方案

您的代码的问题是您要求lodash比较确切的内容，title更重要的是在区分大小写的同时比较它，因为{title: name}在 lodash 中触发属性匹配，它只是将标题的内容与变量的内容进行比较。

您可以通过方法创建搜索功能，lodash而不是像这样的 ES6：

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" } ]

const search = function(data, term) {
  return _.find(data, function(x) { 
    return _.includes(_.toLower(x.title), _.toLower(term))}) 
  }

console.log(search(data, 'azadi'))
console.log(search(data, 'Red'))
console.log(search(data, 'zan'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

使用find,includes和toLower lodash方法。

您的代码将如下所示：

function search(data, term) {
  return _.find(data, function(x) { 
    return _.includes(_.toLower(x.title), _.toLower(term))}) 
}

document.getElementById('input').addEventListener('change', function() {
  var name = document.getElementById('input').value;
  var result = search(movies, name);  // <-- change to use the new search fn
  if (result) {
    console.log('Nothing found');
  } else {
    console.log('Go to ' + result.video_url);
  }
});

使用ES5，您还可以通过以下方式执行此操作：

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" } ]

const search = function(data, term) {
  return data.find(function(x) {
    return x.title.toLowerCase().indexOf(term.toLowerCase()) >= 0 })
} 

console.log(search(data, 'azadi'))
console.log(search(data, 'Red'))
console.log(search(data, 'zan'))

使用ES6，这将是：

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" } ]

const search = (data, term) => 
  data.find(({title}) => title.toLowerCase().includes(term.toLowerCase()))

console.log(search(data, 'azadi'))
console.log(search(data, 'Red'))
console.log(search(data, 'zan'))

请注意，这不是一种超级高效的方法，如果您要以这种方式搜索成百上千的文档，它的性能将不会很好。您需要研究其他方法（二进制搜索等）来解决这个问题。

推荐阅读