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

Основываясь на предыдущем вопросе, который я пытаюсь построить - с помощью сообщества - поиск var langMap = { 'a' : 'a' , 'a' : 'a' , 'o' : 'o' } $ ( '# search-items-box' ). KeyUp ( функция () { вар valThis = $ ( это ). Вал (). toLowerCase (); вар filteredWord = valThis . сплит ( '' ). map ( function ( letter ) { if ( langMap [ letter ]) { return langMap [ letter ]; } return letter ; }). join ( '' ); if ( filterWord == "" ) { $ ( '.itemsList .m3-item' ). show (); } else { $ ( '.itemsList .m3-item' ). каждая ( функция () { вар текст = $ ( это ). Текст (). toLowerCase (); ( текст . IndexOf ( filteredWord ) == 0 ) ? $ ( это ). шоу () : $ ( это ). Скрыть ( ); }); } }); которая работает, даже если пользователь вводит нелатинские символы в поле ввода поиска (в данном случае шведские буквы).

Это то, что у меня есть до сих пор:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input placeholder="Search Me" id="search-items-box" type="text" /> 

<div class="itemsList">
<div class="m3-item">Orange</div>
<div class="m3-item">Banana</div>
<div class="m3-item">Potato</div>
</div>
if (langMap[letter]) {
    return langMap[letter];

Проблема в том, что поиск не работает должным образом. Если вы попытаетесь ввести три слова, вы заметите, что результаты не отображаются.

JSFIDDLE Здесь

jquery,html,css,

0

Ответов: 2


1 принят

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

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

0

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

  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();
      }
    });
  });
});
JQuery, HTML, CSS,
Похожие вопросы