Функция фильтра поиска с латинскими символами с использованием jquery

Первое условие - изменение ввода символа при каждом нажатии клавиши, если условие выполнено:

var langMap = {
    'a' : 'a',
    'a' : 'a',
    'o' : 'o'
};

Теперь, когда вы вводите «b», в поиске появляется банана, потому что «b» не является частью вашего массива «a», и, следовательно, он не изменяется. Он ищет любое слово, начинающееся с «b», а результатом поиска является «Banana»,

Однако, как только вы наберете langMap, Banana больше не существует, потому что он был преобразован в 'a'. В результате он ищет «ba», который возвращает нулевые результаты (как и ожидалось).

В другой заметке вы также можете столкнуться с другой проблемой позже с вашим массивом langMap:

 var langMap = {
  "a":"a",
  "a":"a",
  "o":"o"
 }

 $('#search-items-box').keyup(function(){
  var valThis = $(this).val().toLowerCase();
  var filteredWord = getLatinWord(valThis);

  if(filteredWord == ""){
      $('.itemsList .m3-item').show();           
  } else {
      $('.itemsList .m3-item').each(function(){
          var text = $(this).text().toLowerCase();
          text = getLatinWord(text);
          (text.indexOf(filteredWord) === 0) ? $(this).show() : $(this).hide();
      });
  }
 });

 function getLatinWord(word){
   return word.split('').map(function(character){
                          if (langMap[character]) {
                            return langMap[character];
                          }
                          return character;
                       }).join('');
 }

У вас есть один ключ, 'a'который определяет два разных значения. Одно из значений никогда не будет доступно.

Основываясь на нашем обсуждении, вот мое предлагаемое решение:

• Инвертируйте ключи и значения для langMap

• Преобразование сравниваемого текста в латинские символы

  normalizeWord

Здесь я предлагаю более ориентированный на данные подход. Речь идет о нормализации ваших возможных совпадений с вашими потребностями. Согласно вашей спецификации нормализованное слово должно иметь следующие характеристики:

1. Замените все символы без ASCII своим приближением ASCII
2. Все должно быть строчным

Это делается в функции dictionary.

Остальная часть кода создает filterпривязку исходного слова к нормализованному представлению. filterФункция возвращает список исходных слов из набора данных, которые подбираются к входу.

На самом деле существует небольшое несоответствие в привязке кода к DOM, потому что этот подход действительно работает на данном наборе данных. В реальной жизни я бы просто перестроил HTML-представление совпадений из отфильтрованного списка вместо того, чтобы показывать и скрывать уже существующие элементы DOM.

$(function() {
  var langMap = {
    'a' : 'a',
    'a' : 'a',
    'o' : 'o'
  };

  var words = [
    'Orange',
    'Banana',
    'Potato'
  ];

  // Create normalized words

  // The map with the original and normalized word
  var dictionary = {};

  // Normalization
  words.forEach(function(w) {
    var word = normalizeWord(w);
    dictionary[word] = w;
  });

  function normalizeWord(word) {
    for (key in langMap) {
      word = word.toLowerCase()
        .replace(new RegExp(key, 'g'), langMap[key]);
    }
    return word;
  }

  function filter(word) {
    var possibleMatch = normalizeWord(word);
    var result = [];
    for (normalizedWord in dictionary) {
      if (normalizedWord.indexOf(possibleMatch) === 0) {
        result.push(dictionary[normalizedWord]);
      }
    }
    return result;
  }

  // Test
  var results = [
    'b -> ' + filter('b'),
    'bs -> ' +  filter('bs'),
    'baNana -> ' + filter('baNana'),
    'Potato ->  ' + filter('Potato')
  ]

  console.log(results);

  // Binding to the DOM
  $('#search-items-box').keyup(function() {
    var value = $(this).val();
    var matches = filter(value);

    if (matches.length === 0) {
      $('.itemsList .m3-item').show();
      return;
    }

    $('.itemsList .m3-item').each(function() {
      var $this = $(this),
        value = $this.html();

      if (matches.indexOf(value) > -1) {
        $this.show();
      } else {
        $this.hide();
      }
    });
  });
});