CODEWITHSUNDEEP
semantic-uisemantic-ui-react
Garry Taylor
Garry Taylor

Reputation: 1115

Dropdown Search fuzzy but require Begins with

Semantic-UI-React search pattern appears to be fuzzy however, I need "starts with". Reviewing Semantic-UI this is supported, but I can't find the options in Semantic-UI-React.

Is this possible? if not can someone directly how I can extend/Override the search module?

What is expected? When typing "B" into the search input, I expect countries beginning with 'B' to be displayed. What I get When typing "B" into the search input, I get any countries with 'B' or 'b' in the name.

https://codesandbox.io/s/semantic-ui-select-search-9l7nu?file=/example.js:1297-1311

References Researched https://github.com/Semantic-Org/Semantic-UI-React/issues/3690 https://semantic-ui.com/modules/dropdown.html#additional-settings

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Search/Search.d.ts https://github.com/Semantic-Org/Semantic-UI-React/blob/master/test/specs/modules/Search/Search-test.js

Upvotes: 1

Views: 204

Answers (1)

Garry Taylor
Garry Taylor

Reputation: 1115

The Framework is not going to be up-dated to match Semantic but there is a work-around.

https://github.com/Semantic-Org/Semantic-UI-React/issues/4333

function customSearch(options, searchQuery) {
  return options.filter((option) =>
    option.text.toLowerCase().startsWith(searchQuery.toLowerCase())
  );
}

const DropdownExampleSearchSelection = () => (
  <Dropdown
    placeholder="Select Country"
    search={customSearch}
    fluid
    selection
    options={countryOptions}
  />
);

Upvotes: 1

Related Questions