Choices.js 全文搜索过滤器问题

Question

I am using the choices.js library for searching data from the dropdown menu.

when I type in the search box. it shows me first-word exact matching data in suggestions.

for example:

[mid america, america ]

when I search for america it shows me only america option in the dropdown, it will not showing mid america option

here are the choices.js options that I am using for the search filter.

silent: false,
items: [],
choices: [],
renderChoiceLimit: -1,
maxItemCount: -1,
addItems: true,
addItemFilter: null,
removeItems: true,
removeItemButton: false,
editItems: false,
allowHTML: true,
duplicateItemsAllowed: true,
delimiter: ',',
paste: true,
searchEnabled: true,
searchChoices: true,
searchFloor: 1,
searchResultLimit: 4,
searchFields: ['label', 'value'],
position: 'auto',
resetScrollPosition: true,
shouldSort: true,
shouldSortItems: false,
sorter: () => {...},
placeholder: true,
placeholderValue: null,
searchPlaceholderValue: null,
prependValue: null,
appendValue: null,
renderSelectedChoices: 'auto',
loadingText: 'Loading...',
noResultsText: 'No results found',
noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select',
addItemText: (value) => {
  return `Press Enter to add <b>"${value}"</b>`;
},
maxItemText: (maxItemCount) => {
  return `Only ${maxItemCount} values can be added`;
},
valueComparer: (value1, value2) => {
  return value1 === value2;
},
classNames: {
  containerOuter: 'choices',
  containerInner: 'choices__inner',
  input: 'choices__input',
  inputCloned: 'choices__input--cloned',
  list: 'choices__list',
  listItems: 'choices__list--multiple',
  listSingle: 'choices__list--single',
  listDropdown: 'choices__list--dropdown',
  item: 'choices__item',
  itemSelectable: 'choices__item--selectable',
  itemDisabled: 'choices__item--disabled',
  itemChoice: 'choices__item--choice',
  placeholder: 'choices__placeholder',
  group: 'choices__group',
  groupHeading: 'choices__heading',
  button: 'choices__button',
  activeState: 'is-active',
  focusState: 'is-focused',
  openState: 'is-open',
  disabledState: 'is-disabled',
  highlightedState: 'is-highlighted',
  selectedState: 'is-selected',
  flippedState: 'is-flipped',
  loadingState: 'is-loading',
  noResults: 'has-no-results',
  noChoices: 'has-no-choices'
},
// Choices uses the great Fuse library for searching. You
// can find more options here: https://fusejs.io/api/options.html
fuseOptions: {
  includeScore: true
}

Answer 1

If there is no mistake this should work. For example, ban will match Bangladesh , Albania and Lebanon .

 document.addEventListener('DOMContentLoaded', function() { const choicesBasic = new Choices('#countries', { searchPlaceholderValue: "Search a Country", position: 'bottom', choices: [ {value: 'af', label: 'Afghanistan'}, {value: 'al', label: 'Albania'}, {value: 'ao', label: 'Angola'}, {value: 'al', label: 'Anguilla'}, {value: 'bd', label: 'Bangladesh'}, {value: 'lb', label: 'Lebanon'}, {value: 'pk', label: 'Pakistan'}, {value: 'tj', label: 'Tajikistan'}, {value: 'tm', label: 'Turkmenistan'}, {value: 'uz', label: 'Uzbekistan'}, ], searchFields: ['label', 'value'], }); });

 * { box-sizing: border-box; }

 <link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/choices.min.css" crossorigin="anonymous" /> <script src="https://choices-js.github.io/Choices/assets/scripts/choices.min.js" crossorigin="anonymous"></script> <select id="countries"> <option value="">Select a Country</option> </select>