javascript 中帶有 select 框的搜索欄

Question

您好，我使用下面的代碼在 javascript 中創建一個 select 框。 用戶選擇該選項，然后單擊一個按鈕來過濾項目。 Onclick myfunction() 被觸發並重定向到新的 url 以顯示結果。

我還想添加一個搜索欄以及 select 框。 The user will select the category from the select box and then will use the search bar to write a word or a phrase to search in the category he will select from the select drop down box.Check the image to understand how i would like to modify它。我不想 select 任何插件。

帶有 select 框的圖像示例搜索欄

  <?php
  
   // Parameters
//elmnt: This is the select box taken by functions like "getElementById" or any other way.
//value: This is the value which needs to be selected from the options of elmnt.

   echo "<br><br>Filter Banggood products by Product Category: ";
echo '<select id="apo">
<option value="0">All Products</option>
<option value="1">Smartphones</option>
    <option value="2">Projectors</option>
      <option value="3">Vaccum cleaner</option>
     
</select>';


echo "  ";
?>
<input type="button" value="Apply Filter" style="background-color:grey" onclick="myfunction('<?php echo $r1 ?>')"/>
<script>
    
 var noumero=<?php echo $r1
     ?>;
  
     if (noumero=="44")
     {
       document.getElementById('apo').value = '<?php echo "1" ?>';
     }
     else if (noumero=="38")
     {
       document.getElementById('apo').value = '<?php echo "2" ?>';
     }
      else if (noumero=="194")
     {
       document.getElementById('apo').value = '<?php echo "3" ?>';
     }
    
     else
     {
  document.getElementById('apo').value = '<?php echo "0" ?>';
     }
 </script>

任何幫助表示贊賞。

Answer 1

我建議你使用像 Semantic UI 這樣的庫

看看這里標記的輸入

語義 UI 標記輸入