Support for searches with Spanish characters

[monoraulg]

Hi how are things.
This is an excellent autocomplete with vanilla js, thanks for sharing!!
I started using it for a personal project and I found the limitation that it did not work well for Spanish given the characters with accents, among others, that are used in our language.

I want to share my humble solution, maybe it can help someone with the same problem that I had. Maybe it can be done in a more efficient way, but in my case this worked perfectly.

First I modified the search() function on line 229 (autoComplete.js).
I added an optional "normalize" parameter.
Then I added a condition if "normalize" is true that modifies the return _match

var search = (function (query, record, options) { var _ref = options || {}, mode = _ref.mode, normalize = _ref.normalize, diacritics = _ref.diacritics, highlight = _ref.highlight; var nRecord = format(record, diacritics); record = String(record); query = format(query, diacritics); if (normalize) { var _match = nRecord.indexOf(query), _matchEs = nRecord.normalize("NFD").replace(/[\u0300-\u036f]/g, '').indexOf(query.normalize("NFD").replace(/[\u0300-\u036f]/g, '')); if (~_matchEs) { query = record.substring(_match, _matchEs + query.normalize("NFD").replace(/[\u0300-\u036f]/g, '').length); _match = highlight ? record.replace(query, mark(query, highlight)) : record; return _match; } } else if (mode === "loose") { query = query.replace(/ /g, ""); var qLength = query.length; var cursor = 0; var match = Array.from(record).map(function (character, index) { if (cursor < qLength && nRecord[index] === query[cursor]) { character = highlight ? mark(character, highlight) : character; cursor++; } return character; }).join(""); if (cursor === qLength) return match; } else { var _match = nRecord.indexOf(query); if (~_match) { query = record.substring(_match, _match + query.length); _match = highlight ? record.replace(query, mark(query, highlight)) : record; console.log(3, _match); return _match; } } });

I then modified the findMatches() function by defining the optional parameter (normalize: ctx.normalize):

var findMatches = function findMatches(query, ctx) { var data = ctx.data, searchEngine = ctx.searchEngine; var matches = []; data.store.forEach(function (value, index) { var find = function find(key) { var record = key ? value[key] : value; var match = typeof searchEngine === "function" ? searchEngine(query, record) : search(query, record, { mode: searchEngine, diacritics: ctx.diacritics, highlight: ctx.resultItem.highlight, normalize: ctx.normalize, }); if (!match) return; var result = { match: match, value: value }; if (key) result.key = key; matches.push(result); }; if (data.keys) { var _iterator = _createForOfIteratorHelper(data.keys), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var key = _step.value; find(key); } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } else { find(); } }); if (data.filter) matches = data.filter(matches); var results = matches.slice(0, ctx.resultsList.maxResults); ctx.feedback = { query: query, matches: matches, results: results }; eventEmitter("results", ctx); };

Finally, in the autocomplete implementation I set the normalize parameter to true:

const autoCompleteJS = new autoComplete({normalize: true});

I hope my solution is not too rudimentary, surely it can be done better ;-)
Greetings!

[TarekRaafat]

Hello @monoraulg,

Apologies for my delayed reply, and thanks for sharing your solution!

The library already has built-in support for this through the diacritics config option. Setting diacritics: true normalizes accented characters so that searching for "cafe" will match "café", and searching for "acion" will match "acción".

const ac = new autoComplete({
  selector: "#autoComplete",
  diacritics: true,
  data: { src: ["café", "acción", "información"] }
});

This should cover your use case without needing to modify the search function. Please try it and let me know how it goes.

Cheers! :)