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

在需要使用javascript中的DOM数据时，我建议使用data-* attribute。

您的名称元素应如下所示：

<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并进行检查，但这不是一个非常灵活的解决方案。假设您随后收到功能请求，以按年龄对结果进行排序？还是得分？还是喜欢的颜色？还是以上所有？ kes！

使用data- *属性将更容易实现，这就是为什么我总是总是向那些希望从js中的DOM中读取信息的人推荐它们的原因。它使您的代码更灵活。

Answer 2

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

sonar.projectKey=Platform_UI
sonar.projectName=Platform_UI
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=UI_Services
sonar.java.binaries=UI_Services
sonar.scm.enabled=true
sonar.scm.url=scm:ssh://repository@sbchdks.com/home/repository/PLAT_6

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

搜索栏查找带有<span id =“”

2 个答案: