语义 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>

语义 UI - 搜索选择不搜索

Semantic UI - Search Selection not searching

javascript

wordpress

search

jquery

semantic-ui