Блог

Главная - Вопросы по программированию - Использование JS / jQuery для поиска строк / нечеткого сопоставления?

Использование JS / jQuery для поиска строк / нечеткого сопоставления?

#javascript #jquery

#javascript #jquery

Вопрос:

полностью на JS, без серверной части. Мне нужно разрешить пользователю выполнять поиск, а затем отображать список совпадающих имен. Я использую автозаполнение пользовательского интерфейса jQuery, но мне нужен JS для фильтрации результатов.

Задан массив имен:

 Bob Hope
James Jones
Steve Jobs
Larry McBridge

Задан поисковый запрос типа Bo

Как я могу вернуть только Bob Hope

Задан поисковый запрос типа b:

Как я могу получить все, кроме Джеймса Джонса?

Любой простой JS для сравнения двух строк? Спасибо

Комментарии:

1. В интересах будущих читателей я реализовал библиотеку только для этого: github.com/uohzxela/fuzzy-autocomplete

2. @uohzxela — Для себя я пришел сюда, чтобы избежать использования библиотеки (их было достаточно). Кроме того, быстрый взгляд на ваш показывает, что это было сделано для очень специфического варианта использования, и это вряд ли поможет многим разработчикам

Ответ №1:

 var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"]   
var query = "bo"
var results = $(names)
        .map(function(i,v){ 
            if(v.toLowerCase().indexOf(query.toLowerCase())!=-1){return v} 
        }).get()

// results is ["Bob Hope"]

Комментарии:

1. Итак, чтобы проверить одну строку, если(stringToSearch.toLowerCase().indexOf(stringQuery.toLowerCase())!=-1){ оповещение («совпадение»); }

Ответ №2:

Возможно, я неправильно вас понял (учитывая сложность приведенного выше ответа), но я придумал это, в котором используется jQuery. Каждый раз при нажатии клавиши (когда ввод имеет фокус) выполняется поиск по всем li элементам на странице и определяется, содержат ли они искомое условие.

Вот HTML:

 <ul><li>Bob Hope</li>
<li>James Jones</li>
<li>Steve Jobs</li>
<li>Larry McBridge</li></ul><br>
Search: <input id="search" length="24" />

И вот ваш jQuery:

 $("#search").keyup(function(){
    $("li").hide();
   var term = $(this).val();
    $("li:contains('"   term   "')").show();
});

Ответ №3:

Используя ответ Ивана, но с изменениями ES6:

 var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"];

function findIn(s, list){
    return list.filter((v) => v.toLowerCase().indexOf(s.toLowerCase()) != -1 );
}


findIn('bo', names);
Метки: