как в случае нечувствительности содержать поиск с lodash - PullRequest
Новая
       2

как в случае нечувствительности содержать поиск с lodash

0 голосов
/ 14 ноября 2018

У меня есть действительный файл JSON (я поставил только ограниченную часть этого).я хочу искать нечувствительный и выглядеть как содержащийся (предположим, что в файле json есть запись Red Carpet, если пользователь ищет «red», он покажет video_url матчей (video_url из «Red Carpet»). У меня есть ограничение, которое я могу 'Не используйте 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);

    }
    });

Edit2: update2

исправлено и решено комментарием Акриона, большое спасибоhim

Edit3: update3

Казалось, ответ Акриона: при поиске символа "a" он не возвращает все заголовки, в которых есть символ A, пожалуйста, изменитеи исправьте код, который я пытаюсь запустить в ответе части ES5, и он возвращает только zane ziadi первый элемент, но не "Cheghadr Vaght Dari"

Edit4: update4 как предложил Акрион в своем комментарии, я могу использовать фильтр вместо поиска, чтобы соответствовать всем запросам.я помечаю его ответ для этой темы навсегда

1 Ответ

0 голосов
/ 15 ноября 2018

Проблема с вашим кодом заключается в том, что вы просите 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'))

Обратите внимание, что это не супер эффективный подход, и если вы собираетесь искать сотни / тысячи документов таким способом, он не будет работать хорошо,Вам придется искать другие способы (бинарный поиск и т. Д.), Чтобы решить эту проблему.

...