带有JavaScript中选择框的搜索栏

时间:2020-06-23 11:35:54

标签: javascript html

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

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

image example search bar with select box

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

任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

我建议您使用类似语义UI的库

在这里看看带有标签的输入

Semantic UI Labelled Input