Question

我想创建一个产品查找器，以缩小产品列表的范围，然后可以像搜索过滤器一样显示这些产品。

以下是我想做的一个例子，它是GiffGaff的手机搜索器：

https://phonefinder.giffgaff.com/#/user/home

我找不到用于产品查找器的任何教程，而且搜索过滤器教程非常有限。

我考虑过使用表单输入通过为每个问题减去一个不同的数组来缩小产品的数组。

这是我从多个示例中汇总的代码，目的是查看它是否可以工作，但是我不确定它是否可扩展或如何将其实现到我的网站中。

我将创建许多类似这样的按钮，并在底部带有一个“提交”按钮，然后网站将输出与用户意见相关的结果列表。

例如，在我回答第一个问题后编写的代码中，网站在选择“主页”按钮时删除了与工作有关的产品a，c和d。

<script>
            var array1 = ["a", "b", "c", "d", "e"];
            // by Id
             function func2() 
            {
                if(document.getElementById("h").checked)
                {
                    var val = document.getElementById("h").value;
                    homeuse = true
                    $(function(){
                        var array2 = ["a", "c", "d"];
                        var diff = $(array1).not(array2).get();
                        console.log(diff);
                        alert(diff);
                    });

                }

                else if(document.getElementById("r").checked)
                {
                    var val = document.getElementById("r").value;
                    workuse = true
                    $(function(){
                        var array2 = ["b", "e"];
                        var diff = $(array1).not(array2).get();
                        console.log(diff);
                        alert(diff);
                    });

                }

            }

    </script>

</head>

<body>

    <input type="radio" name="type" value="1111" id="h" onclick="func2();"/>Home<br/>
    <input type="radio" name="type" value="2222" id="r"  onclick="func2();"/>Work<br/>

</body>

是否有更简单的方法以及如何将其实现到产品列表中。甚至必须在服务器端完成吗？

谢谢

如何制作使用表单答案的产品查找器？

0 个答案: