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

Question

Поэтому я пытался создать функцию автоматического предложения, которая будет отображать несколько предложений, которые имеют частичное совпадение или значение в пределах inputbox.Также следует начинать давать предложения, начинающиеся с определенного символа, который является @ Символом

Пример: Задание 1 @james @ john

Очень похоже на то, как Facebookначинает вносить предложения, когда вы предоставляете текст с @ символом

Приведенный ниже код прослушивает значения, вставленные в inputbox во время нажатия клавиши.Затем он сохраняет эти значения в массиве, где он будет фильтровать значения, которые содержат только @ в начале.Затем выполняется сравнение с другим массивом, который имеет эти значения.Как только совпадение указано, оно затем перебирает элемент names-list для совпадения, а затем добавляет класс с именем display

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

let listenOnInput = () => {
  let handles = [];
  let names = ['@john', '@jake'];

  $(".task-label input").on("change keyup paste", function() {
    let names = ($(this).val());
    let splitHandles = names.split(' ');

    $.each(splitHandles, function(i, value) {
      if (splitHandles[i].indexOf('@') == 0) {
         handles.push(splitHandles[i]);
       }
      for (let elements of handles) {}
    })
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task-label">
  <input type="text">
</div>
<ul class="name-list">
  <li class="name name-john">@John</li>
  <li class="name name-jake">@John</li>
</ul>

Answer 1

Вы на правильном пути!И почти там.

После разделения всех имен вам нужно будет сравнить, если одно из приведенных имен каким-то образом соответствует нужному элементу в вашем HTML.Вы можете сделать это несколькими способами, например, проверить innerText, className или id одного из <li class="name name-x"> элементов.

Я изменил ваш HTML так, чтобы каждыйиз ваших <li> элементов есть id.Это делает их уникальными и легкими для выбора.Я также дал элементу <input> значение id по той же причине.

Для слушателя события прослушайте либо change, либо input.Любой из них срабатывает каждый раз, когда значение было изменено, что также означает, что пользователь вводит или вставляет в него строку.В качестве примера я выбрал input, так как вы захотите, чтобы что-либо происходило только при изменении текста из <input>.Прочитайте этот другой пост SO , чтобы узнать, в чем заключается разница между change и input.

Поскольку я не смог найти функцию jQuery, необходимую для построения на вашем примере, ярешил сделать это с ES6.В вашем примере я вижу, что вы используете цикл for... of и функцию стрелки, поэтому я предположил, что использование современного JS разрешено.

Я попытался добавить как можно больше подсказок в приведенном ниже примере, объясняющем, чтокаждый кусок кода делает.Если у вас есть какие-либо вопросы относительно кода ниже, не стесняйтесь спрашивать.

Я надеюсь, что это поможет вам.

// Select the input.
const input = document.getElementById('name');

// Select the <li class="name"> elements.
const names = document.querySelectorAll('.name');

// Listen to the 'input' event. This will be triggered whenever the value
// of the input has been changed.
input.addEventListener('input', event => {

  // Get the value of the input and split it.
  const value = event.target.value;
  const splitValues = value.split(' ');

  // Get only the values that start with '@' and return the remaining values 
  // in lowercase, without the '@' symbol, to match with the id attribute later on.
  const targetValues = splitValues
    .filter(value => value.indexOf('@') === 0) // Only values starting with '@'
    .map(value => value.substring(1).toLowerCase()); // '@Name' => 'name'

  // Loop over each name element. If one of the values corresponds, 
  // partially or fully, with the id of the a <li class="name"> element
  // add the display class, if not remove the display class.
  names.forEach(name => {
    if (targetValues.some(value => name.id.includes(value))) { // id === 'name' ?
      name.classList.add('display');
    } else {
      name.classList.remove('display');
    }
  });

});

.name {
  display: none;
}

.name.display {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task-label">
  <input id="name" type="text" name="name">
</div>
<ul class="name-list">
  <li id="john" class="name name-john">@John</li>
  <li id="jake" class="name name-jake">@Jake</li>
  <li id="alex" class="name name-alex">@Alex</li>
  <li id="allison" class="name name-allison">@Allison</li>
</ul>