使用JSON搜索过滤器以实时填充

Question

我正在为我的网站开发一个搜索功能，它将使用正则表达式搜索JSON对象。我想要的是：当用户搜索时，结果会实时显示，就像谷歌的搜索结果一样。

不幸的是我没有任何源代码，因为我甚至不知道从哪里开始。

有谁知道如何做到这一点？或者任何可以向我解释的参考网站？

Answer 1

您需要将问题分解为其组成部分，然后解决每个问题。例如，根据我所拥有的数据，可以像下面这样打破上述问题：

1. 将keypress侦听器添加到搜索栏或在其提交按钮上侦听单击事件以触发Javascript搜索方法。

2. 在搜索方法中，从搜索字段中读取值。

3. 迭代您的JSON，将JSON中的字符串与搜索值进行比较，并根据需要提交一系列匹配项。

4. 迭代匹配并使用Javascript绘制新的DOM元素作为搜索结果，或者迭代现有的DOM元素并隐藏/显示它们。

通过解决上述问题，您可以得出一些需要解决的具体问题：

1. 您如何在DOM元素上收听按键或点击事件？

2. 如何从其中一个事件中调用Javascript方法？

3. 您如何阅读搜索字段的值？

4. 如何迭代JSON对象？

5. 如何根据值数组动态绘制新的DOM元素？

上述所有问题都已经有了Stack Overflow的答案，你可以搜索和查找。