首页 > 解决方案 > javascript中带有选择框的搜索栏

问题描述

您好,我使用下面的代码在 javascript 中创建一个选择框。用户选择该选项,然后单击一个按钮来过滤项目。Onclick myfunction() 被触发并重定向到新的 url 以显示结果。

我想在选择框的同时添加一个搜索栏。用户将从选择框中选择类别,然后使用搜索栏写一个单词或短语以在他将从选择下拉框中选择的类别中搜索。检查图像以了解我想如何修改它。我不想选择任何插件。

带有选择框的图像示例搜索栏

  <?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>

任何帮助表示赞赏。

标签: javascripthtml

解决方案


我建议你使用像 Semantic UI 这样的库

看看这里标记的输入

语义 UI 标记输入


推荐阅读