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>

这里是JSON对象的JS，是从php数组创建的：

<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>

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

如果您想要自动完成，那么您将需要编写更多代码：）

Answer 2

您忘记添加echo：

<?php echo json_encode($tempdata);?>;

当您使用json_encode时，您需要echo或print()。还要确保使用正确的外壳（可选）。

JS过滤/自动完成

2 个答案: