选择搜索栏在小屏幕中消失答案

【问题标题】：Select Search bar disappear in small screen选择搜索栏在小屏幕中消失
【发布时间】：2021-09-05 10:53:10
【问题描述】：

我已经构建了通过搜索栏搜索 ID 的表单， desktop view

当我将视图转到手机屏幕时，搜索栏消失了。

我的代码：

  <label for="supervisor"> </label>
  <br>
  <select  id="supervisor" class="chosen" onchange="getSuper(this.value)" required >
    <option disabled selected value>-</option>
    <option  value="ID3357">ID3357</option>
    <option  value="ID2695">ID2695</option>


  </select>

自动完成搜索 jquery

  <script type="text/javascript">
    $(".chosen").chosen();
  </script>

我转发此视频以添加搜索栏：https://www.youtube.com/watch?v=d-gAPYRLMeI

【问题讨论】：

你对不同的视图使用不同的 CSS 吗？你能分享你的 CSS 的相关部分吗？

标签： javascript html css search responsive

【解决方案1】：

对不同宽度使用 css 媒体查询，例如

// 小型设备（横向手机，576px 及以上） @media（最小宽度：576px）{ ... }

// 中型设备（平板电脑，768px 及以上） @media（最小宽度：768px）{ ... }

// 大型设备（台式机，992px 及以上） @media（最小宽度：992px）{ ... }

// 超大型设备（大型桌面，1200px 及以上） @media（最小宽度：1200px）{ ... }

根据您的设备宽度应用它们并在它们之间应用不同的功能

【讨论】：

【解决方案2】：

我改变了JS函数，请点击此链接解决问题或在下拉菜单中添加（小屏幕）搜索栏

https://select2.org/getting-started/basic-usage

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。