How to add search functionality?-CodePudding

So I'm building a page that displays all the countries in the world using REST Countries V2 API and I would like to add a search and also filter functionality. the search bar should search and update my page based on country name and I also want a drop down that I can update the results based on the region.

currently my page shows all the countries and theres inputs for the search and a dropdown to filter by region but I'm not sure how to make these elements functional.

Does my search bar have to do something with the API call or is there a way to filter based on the content thats already on my page?

Here is my search / filter options (using tailwind css)

<section >
    <div >
        
        <div >
            <i ></i>
            <input type="text" name="search" id="search"  placeholder="Search for a country...">
        </div>
        
        <div >
            <select name="regions" id="regions" >
                <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 ></i>
        </div>
    </div>  
</section>

CodePudding user response：

Since you tagged JavaScript, have you thought about using it? In a project I am working on I am doing something similar. Below is something along the lines of a combination of what I have and you seem to be working on. To add search, just do the same thing basically but where the .value contains the search string. You can expand this as much as you need to and you don't have to wait for a postback, since it is all done client side.
HTML:

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr >
        <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';
        }
    }

}

CodePudding user response：

As I understand, you can do either with or without API calls.

If you don't do API calls, then everything will happen in the front-end. You divide and save all the countries into different e.g arrays according to region, or the REST country API can do it?. When you get the search country (check below script section, I have implement how to get the input country) and the selected region (I didn't implement how to get the select value, you may check online how to get it), you just check the specific array for this region, and display detailed information for this country or "not found". To implement the searching functionality, you may use array.filter(), array.find() or array.includes(), below I am using array.includes(). Note the HTML part is copied from your codes. My answer is inside the script section.

<!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 >
     <div >
       <div >
         <i ></i>
         <input
           type="text"
           name="search"
           id="search"
           
           placeholder="Search for a country..."
         />
       </div>

       <div >
         <select
           name="regions"
           id="regions"
           
         >
           <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
           
         ></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>

If you want to do API calls, then after you get the searchCountry and selectedRegion, you need to sent GET request to back-end,the back-end get the request and can do the same search as above mentioned(array.includes()), then send response back to the front-end. If found, send the detailed information of the searchCountry, if not found, send "not found" with status code 404 for example.

Hopefully this helps.