文章/答案/技术大牛

发布

社区首页 >问答首页 >如何添加搜索功能？

问如何添加搜索功能？
EN

Stack Overflow用户

提问于 2022-10-04 18:27:36

回答 2查看 92关注 0票数 -1

因此，我正在构建一个使用REST国家V2 API显示世界上所有国家的页面，我想添加一个搜索和过滤功能。搜索栏应该根据国家名称搜索和更新我的页面，我也想要一个下拉列表，我可以根据区域更新结果。

目前，我的页面显示了搜索的所有国家和输入，以及按区域筛选的下拉列表，但我不知道如何使这些元素发挥功能。

我的搜索栏必须对API调用做些什么吗?还是有一种基于页面上已经存在的内容进行过滤的方法？

下面是我的搜索/筛选选项(使用顺风css)

<section class="bg-darkbg pt-32 pb-16 alignfull">
    <div class="container mx-auto flex justify-between">
        
        <div class="relative">
            <i class="fa fa-search text-white absolute left-4 top-4"></i>
            <input type="text" name="search" id="search" class="bg-dark text-white py-3 pl-12 pr-28 rounded-md" placeholder="Search for a country...">
        </div>
        
        <div class="relative">
            <select name="regions" id="regions" class="text-white bg-dark py-3 px-4 pr-16 rounded-md appearance-none">
                <option value="" disabled selected>Filter by Region</option>
                <option value="africa">Africa</option>
                <option value="america">America</option>
                <option value="asia">Asia</option>
                <option value="europe">Europe</option>
                <option value="oceana">Oceana</option>
            </select>
            <i class="fa-solid fa-chevron-down text-white absolute right-4 top-4"></i>
        </div>
    </div>  
</section>

javascript

php

json

tailwind-css

回答 2

Stack Overflow用户

发布于 2022-10-04 18:40:25

自从你标记了JavaScript之后，你有没有想过要使用它？在我正在做的一个项目中，我也在做类似的事情。下面是一些与我和你似乎正在研究的东西的结合。要添加搜索，只需执行基本相同的操作，但是.value包含搜索字符串。您可以根据需要进行扩展，并且不需要等待回发，因为所有这些都是客户端完成的。

HTML：

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr class="all america unitedstates">
        <td>Data 1</td>
        <td>Date 2</td>
    </tr>
</table>

JavaScript：

let rows = document.getElementsByClassName('all');
ChangeView();
function ChangeView() {
    var filter = document.getElementById('filter1').value;
    for (var i = 0; i < rows.length; i++) {
        if (rows[i].classList.contains(filter)) {
            rows[i].style.visibility = 'visible';
        }
        else {
            rows[i].style.visibility = 'collapse';
        }
    }

}

票数 1

Stack Overflow用户

发布于 2022-10-04 19:18:47

据我所知，您可以使用API调用，也可以不调用API。

如果您不执行API调用，那么一切都会发生在前端。您按照区域将所有国家划分并保存为不同的数组，或者REST国家API可以这样做？当您获得搜索国家(请在脚本下面检查，我已经实现了如何获取输入国家)和选定区域(我没有实现如何获得选择值，您可以在线检查如何获得它)，您只需检查该区域的特定数组，并显示该国家的详细信息或“找不到”。要实现搜索功能，可以使用array.filter()、array.find()或array.includes()，下面我使用的是array.includes()。注意，HTML部件是从代码中复制的。我的答案在脚本部分。

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <section class="bg-darkbg pt-32 pb-16 alignfull">
     <div class="container mx-auto flex justify-between">
       <div class="relative">
         <i class="fa fa-search text-white absolute left-4 top-4"></i>
         <input
           type="text"
           name="search"
           id="search"
           class="bg-dark text-white py-3 pl-12 pr-28 rounded-md"
           placeholder="Search for a country..."
         />
       </div>

       <div class="relative">
         <select
           name="regions"
           id="regions"
           class="text-white bg-dark py-3 px-4 pr-16 rounded-md appearance-none"
         >
           <option value="" disabled selected>Filter by Region</option>
           <option value="africa">Africa</option>
           <option value="america">America</option>
           <option value="asia">Asia</option>
           <option value="europe">Europe</option>
           <option value="oceana">Oceana</option>
         </select>
         <i
           class="fa-solid fa-chevron-down text-white absolute right-4 top-4"
         ></i>
       </div>
     </div>
   </section>
   <script>
     const asiaContries = ["China", "Korea", "Apple", "Orange"];

     let searchCountry;

     const textInput = document.getElementById("search");

     let timeout = null;

     textInput.onkeyup = function () {
       clearTimeout(timeout);

       timeout = setTimeout(function () {
         searchCountry = textInput.value;
         console.log("search country = ", searchCountry);
         const result = asiaContries.includes(searchCountry);
         if (result) {
           console.log("found");  //display details  country details
         } else {
           console.log("not found"); //dispay "not found" 
         }
       }, 500);
     };
   </script>
 </body>
</html>

如果您想要执行API调用，那么在获得searchCountry和selectedRegion之后，需要将get请求发送到后端，后端获取请求并可以执行上述搜索(array.includes())，然后将响应发送回前端。如果找到，则发送searchCountry的详细信息，如果没有找到，则发送状态代码404的"not“。

希望这能帮上忙。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73952133

复制

相似问题

问如何添加搜索功能？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加搜索功能？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加搜索功能？
EN