javascript - JS 过滤器/自动完成

Question

我正在尝试在我的网站上设置一个搜索字段，以具有基于 JSON 对象中的字符串的自动完成/过滤功能。我想将搜索框视为一种过滤掉 JSON 对象中可能存在的任何内容的方法。

这是 html 格式的搜索栏:

<form id="searchProducts">
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
<span class="md-input-bar"></span>
</form>

这是从 php 数组创建的 JSON 对象的 JS:

<script type = "text/javascript">
var orderFormData = <?php Json_encode ($tempdata);?>;
</script>

我不确定最好的函数或如何在 JSON 对象上使用它，但我听说 JS 自动完成可能是一个很好的解决方案。

有没有一种非常简单的方法可以将它们联系在一起并在我的搜索中有一个很好的自动完成/过滤功能？

Answer 1

这只是作为概念验证:

<form id="searchProducts">
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
<span class="md-input-bar"></span>
</form>
<script>
  var orderFormData = <?php Json_encode ($tempdata);?>;
</script>
<script>
  var orderData = orderFormData // default value
  var search = function (e) {
    var term = e.currentTarget.value     
    orderData = Object.entries(orderFormData).reduce(function (data, entry) {
      if (entry[0].match(term) || entry[1].match(term)) {
        data[entry[0]] = entry[1]
      }

      return data
   }, {})

   console.log(orderData)
  }

  document.querySelector('#srch-term').addEventListener('keyup', search)    
</script>

这会根据从键/值到输入中给定术语的匹配来处理过滤器部分。

如果你想要自动完成，那么你将不得不编写更多的代码:)