搜索栏以查找具有<跨度 id 的现有字符串

Question

>我有一个生成100个名字的网站，例如Joey，Daniel，Ronnie等。它们不是从数据库中生成的，就像<div class="names">Joey</div>之类的。

我有一个搜索栏<input type="text" id="Search" onkeyup="myFunction()" placeholder="placeholder text" autofocus>

我怎样才能让它发挥作用，以便每当有人从 100 个名字中输入一个名字时，它就会找到它？如果输入的名称不在 100 个名称中的 1 个中，请说"无结果">

Answer 1

这是我使用 jquery 自动完成 UI 准备的小提琴：

$( function() {
var availableTags = $.makeArray($('div.names').map((i,d)=>$(d).text()));
$( "#Search" ).autocomplete({
source: availableTags
});
} );

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="Search" placeholder="placeholder text" autofocus>
<div class="names">Joey</div>
<div class="names">Alec</div>
<div class="names">Mike</div>
<div class="names">Fred</div>
<div class="names">George</div>
<div class="names">Anne</div>
<div class="names">Cordelia</div>
<div class="names">Jenny</div>
<div class="names">Melanie</div>

Answer 2

我建议在你需要在javascript中使用DOM中的数据时使用data-*属性。

带有名称的元素应如下所示：

<div class="name" data-name="Joey">Joey</div>

var elements = document.querySelectorAll('.name');
var input= document.querySelector('input.search-box-selector');
for (var i = 0; i < elements.length; i++) {
var name = elements[i].dataset.name;
//check strings against each other
}

通过提供的示例，您可以获取元素的 innerHTML 并进行检查，但这不是一个非常灵活的解决方案。假设您随后收到一个功能请求，以按年龄对结果进行额外排序？还是得分？还是最喜欢的颜色？还是以上所有？哎呀！

使用 data-* 属性实现起来要容易得多，这就是为什么我总是总是向任何希望在 js 中从 DOM 中读取信息的人推荐它们。它使您的代码更加灵活。