如何用lodash区分大小写包含搜索 [英] how to case insentive contain search with lodash
问题描述
我有一个有效的json文件(我只放入其中的一小部分).我想搜索不区分大小写并查找为包含(假设json文件中有Red Carpet记录,如果用户搜索"red",它将显示匹配项的video_url("Red Carpet"的video_url).我有一个限制,我可以做到)由于硬件原因,请使用ES6.请说明如何将以下json文件转换为javascript对象,并使用jquery或javascript进行包含不区分大小写的搜索.为此,我可以在我的项目中添加lodash或任何其他javascript库. /p>
I have a valid json file (i put only a limited part of that). i want to search incasesensitive and look as contain (suppose there is a record of Red Carpet in json file , if user search "red" it will show the matches's video_url (video_url of "Red Carpet). I have a limitation that i can't use ES6 because of hardware. please show how do i need to convert following json file to javascript object and use jquery or javascript to make a contain incasesensitive search. I can add lodash or any other javascript library to my project for this purpose.
[{
"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);
}
});
Edit2:update2
通过Akrion评论修复并解决,非常感谢他
fixed and solved by Akrion comment, thanks so much to him
Edit3:update3
Akrion答案似乎是,当搜索字符"a"时,它不会返回以A为字符的所有标题,请修改并更正我尝试运行ES5部分答案的代码,并且仅返回zane ziadi项目,而不是"Cheghadr Vaght Dari"
it seemed by Akrion answer, when search a for character "a" it would not return all title which has A as character , please modify and correct the code i try to run ES5 part answer and it only return zane ziadi the first item but not "Cheghadr Vaght Dari"
Edit4:update4 正如Akrion在他的评论中建议的那样,我可以使用过滤器而不是查找来匹配所有搜索.我将他对这个主题的回答永远标记为
update4 as Akrion suggested in his comment i can use filter instead of find to match all searches. i mark his answer for this thread forever
推荐答案
您的代码存在的问题是,您要求lodash
比较title
的确切内容,并且更重要的是,在区分大小写时进行比较,因为{title: name}
触发lodash中的属性匹配,该属性仅将title的内容与变量的内容进行比较.
The issue with your code is that you are asking lodash
to compare the exact contents of title
and more importantly compare it while being case sensitive, since {title: name}
triggers property match in lodash which simply compares the contents of title with the contents of the variable.
您可以通过lodash
方法创建搜索功能,而无需这样的ES6:
You can create a search function via lodash
methods and no ES6 like this:
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 ,您还可以通过以下方式进行操作:
With ES5 you can also do this via:
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'))
请注意,这不是一种超级性能的方法,如果您要以这种方式搜索成百上千的文档,效果将会不佳.您需要研究其他方法(二进制搜索等)来解决此问题.
Please note that this is not a super performant approach and if you are going to search hundreds/thousands of documents this way it will not perform well. You would need to look into other ways (Binary search etc) to solve this.
这篇关于如何用lodash区分大小写包含搜索的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!