javascript - 尝试构建一个自动建议功能，该功能将接受或解析多个值，并且仅接受以特定字符开头的值

Question

因此，我一直在尝试构建一个自动建议功能，该功能将显示在 inputbox 中具有部分匹配或值的多个建议。它还应该只开始提供以特定字符开头的建议，该字符是 @ 符号

Example: Task 1 @james @john

就像当您在文本中提供带有 @ 符号时 facebook 开始提出建议

下面的代码监听按键期间插入到输入框中的值。然后它将这些值存储在数组中，在数组中它将过滤开头仅包含 @ 的值。然后它与具有这些值的另一个数组进行比较。一旦指示匹配，它将循环遍历 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> 的文本发生任何事情。被改变了。阅读 this other SO post了解 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>