Choices-js/Choices

Custom Properties do not work with Fuze Search

Closed this issue · 1 comments

Describe the bug
For some whatever reason it just does not search in the custom properties

To Reproduce

<select name="country" id="country" class="form-select" placeholder="All Countries" type="dropdown">
	<option value="" selected="selected">All Countries</option>
	<option data-custom-properties="Afghanistan, Afganistan, Afghanistan, Afghanistan, Afghanistan, Afghanistan, Afghanistan" value="1">Afghanistan</option>
	<option data-custom-properties="Albania, Albania, Albania, Albania, Albania, Albanien, Albania" value="2">Albania</option>
	<option data-custom-properties="Germany, Germania, Germany, Germania, Germany, Deutschland, Germany" value="79">Germany</option>
</select>

js ---

const element = document.getElementById('country');

const choicesOptions = {
	allowHTML: true,
	searchFields: ['data-customProperties'],
	fuseOptions: {
		shouldSort: true,
		matchAllTokens: true,
		findAllMatches: true,
		ignoreLocation: true,
		threshold: 0.4,
		includeScore: true,
		distance: 100,
		maxPatternLength: 32,
		minMatchCharLength: 1,
	},
	classNames: {
		containerInner: element.classList.toString(),
	},
}

const choices = new Choices(element, choicesOptions);

Expected behavior
When i search for Deutschland, the Germany option should appear for me to select !

**Desktop **

  • OS: Windows 10
  • Browser Chrome
  • Version Latest version

I managed to fix this but after 2 days of debugging.
After i fixed this, it was the time to add an image in there so i had to rewrite the code and actually not adding the options from the HTML, it must use the json data, so i did that the images worked, but when I begin to search, all the images were loaded each time a new character added to the search. typing a character frezed my browser for 5 seconds with 300 options LOL.

Im back to select2 :(