Semantic-UI 搜索下拉类型

Semantic-UI 是一个流行的前端 UI 框架，它提供了多种搜索下拉类型，可以使搜索功能更加高效和美观。下面介绍几种常用的搜索下拉类型。

普通搜索下拉

普通搜索下拉用于简单的搜索功能，可以根据用户输入的关键词搜索匹配的结果。

<div class="ui search">
  <div class="ui icon input">
    <input class="prompt" type="text" placeholder="搜索...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

在输入框中输入关键词后，可以使用 Ajax 请求获取匹配的结果并在 results 中展示。

带有多选的搜索下拉

<div class="ui fluid multiple search selection dropdown">
  <input name="tags" type="hidden">
  <i class="dropdown icon"></i>
  <div class="default text">选择标签</div>
  <div class="menu">
    <div class="item" data-value="html">HTML</div>
    <div class="item" data-value="css">CSS</div>
    <div class="item" data-value="javascript">JavaScript</div>
    <div class="item" data-value="jquery">jQuery</div>
    <div class="item" data-value="nodejs">Node.js</div>
    <div class="item" data-value="react">React</div>
  </div>
</div>

这个下拉框可以用于选择多个标签。用户可以在下拉框中搜索并选择多个标签，选择的结果会自动在下拉框中显示。

带有分类的搜索下拉

<div class="ui search selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">选择国家</div>
  <div class="menu">
    <div class="header">亚洲</div>
    <div class="item" data-value="cn"><i class="cn flag"></i>中国</div>
    <div class="item" data-value="jp"><i class="jp flag"></i>日本</div>
    <div class="item" data-value="kr"><i class="kr flag"></i>韩国</div>
    <div class="header">欧洲</div>
    <div class="item" data-value="uk"><i class="uk flag"></i>英国</div>
    <div class="item" data-value="fr"><i class="fr flag"></i>法国</div>
    <div class="item" data-value="de"><i class="de flag"></i>德国</div>
  </div>
</div>

这个下拉框中的各个选项被按照“亚洲”和“欧洲”的分类放置，可以根据分类进行选择。

带有远程数据的搜索下拉

<div class="ui search selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">选择国家</div>
  <div class="menu">
    <div class="item" data-value="cn"><i class="cn flag"></i>中国</div>
    <div class="item" data-value="us"><i class="us flag"></i>美国</div>
    <div class="item" data-value="ca"><i class="ca flag"></i>加拿大</div>
  </div>
</div>

这个下拉框中的选项不是静态的，而是从远程服务器获取的。可以使用 Ajax 请求获取选项并在下拉框中展示。在这个例子中，下拉框只包含了一些硬编码的选项，但是可以根据需要进行修改。

以上是四种常用的 Semantic-UI 搜索下拉类型，可以根据需要进行选择和使用。