William William - 6 months ago 52
Javascript Question

Semantic UI - Search Selection not searching

How may I make the Semantic UI Search Selection to search?

I'm currently using it inside WordPress but only the search field and the options are showing.



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

You currently aren't targeting the dropdown with your JS. Either add the ID to your HTML, or change your jQuery selector:

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