CODEWITHSUNDEEP
jquerysemantic-ui
boop
boop

Reputation: 7788

How to change the search algorithm for Semantic UI dropdowns?

I want to adapt the search algorithm in Semantic UI Dropdowns. It only matches items that start with the search text, but I want to match all items that contain the search text. Is it possible to add a custom search?

<select class="ui search selection dropdown">...</select>

Upvotes: 2

Views: 1283

Answers (1)

benvc
benvc

Reputation: 15130

You can initialize the dropdown with the fullTextSearch option set to true to fuzzy match text anywhere in the string or 'exact' to exactly match text anywhere in the string.

$('.ui.dropdown').dropdown({ fullTextSearch: true });
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui search selection dropdown">
  <input type="hidden" name="animal">
  <i class="dropdown icon"></i>
  <div class="default text">Select...</div>
  <div class="menu">
    <div class="item" data-value="0">Cat</div>
    <div class="item" data-value="1">Horse</div>
    <div class="item" data-value="2">Seahorse</div>
    <div class="item" data-value="3">Wildcat</div>
  </div>
</div>

Upvotes: 5

Related Questions