javascript - 语义 UI - 搜索选择而不是搜索

Question

如何使语义 UI 搜索选择进行搜索？

我目前在 WordPress 中使用它，但仅显示搜索字段和选项。

jQuery('#search-cursos')
  .dropdown({
    fullTextSearch: true
  });

<link href="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.js"></script>

<div class="ui fluid search selection simple dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
    <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
    <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
  </div>
</div>

Answer 1

您当前没有使用 JS 来定位下拉列表。将 ID 添加到 HTML，或者更改 jQuery 选择器:

// Notice the new selector
jQuery('.ui.search.dropdown')
  .dropdown({
    fullTextSearch: true
  });

<link href="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.js"></script>

<div class="ui fluid search selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
    <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
    <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
  </div>
</div>