Question

我在我的网站上使用JS提供了一个简单的搜索功能，但现在似乎无法正常工作了-在周末之前可以正常使用，但是我认为这是因为我输入了过多的“ if”参数例如，客户将搜索XLR，然后它将在同一页面上重新加载XLR类别。

这是我的代码：

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Tuto</title>
</head>


<body style=" background-color: rgb(4, 41, 255);">
<input type="search" value="" id="search" onchange="openPage()">

<script>
    function openPage() {
        var x = document.getElementById("search").value;

        if (x === "Oyaide") {
            window.location.replace("/Products#!/oyaide/sort/manual");
        }
        
        if (x === "oyaide") {
            window.location.replace("/Products#!/oyaide/sort/manual");
        }
        
        if (x === "OYAIDE") {
            window.location.replace("/Products#!/oyaide/sort/manual");
        }

        if (x === "Opus") {
            window.location.replace("/Products#!/opus-collection/sort/manual");
        }
        
        if (x === "opus") {
            window.location.replace("/Products#!/opus-collection/sort/manual");
        }

（依此类推，大约有50个条目）

我需要将它们分组为变量吗？我刚刚列出了

Answer 1

您的问题可能是拼写错误，而且绝对是您的摘录。我只想向您展示一个使用地图/对象在搜索值和URL之间进行映射的简便方法：

const sites = {
  'oyaide': '/Products#!/oyaide/sort/manual',
  'opus': '/Products#!/opus-collection/sort/manual',
  // ...
};

function openPage() {
   const x = document.getElementById("search").value;

   if(sites[x.toLowerCase()] != null) {
      window.location.replace(sites[x.toLowerCase()]);
   }
}

但是，即使那样也不是最优的，我强烈建议您使用建议的结果来做一个简单的搜索功能，例如google。这很容易实现，用户不必键入整个单词就可以用这种方式得到他的结果。

Answer 2

在页面上，更改

<input type="search" value="" id="search" onchange="openPage()">

到

<input type="search" id="search" />

在您的<script>中，添加以下内容：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('search').addEventListener('change', openPage);
})

出于各种原因，使用内联事件侦听器被认为是不当行为。

用于网站的简单JS搜索功能不再起作用

2 个答案: