Bonjour,

Je souhaiterais créer une fonctionnalité dans laquelle les utilisateurs peuvent faire une recherche sur des articles en base de données.

Les résultats s'affichent au fur et à mesure que l'utilisateur tape dans la barre de recherche.

J'aimerai que le mot tapé dans la recherche soit dynamiquement surligné en jaune. (Il s'agit un peu de la même fonction que Ctrl + F dans le navigateur).

J'aimerai également que le surlignage ignore les accents (ex : si l'on tape "mange" au lieu de "mangé", le mot "mangé" se surligne quand même.)

Auriez-vous une idée de comment faire pour surligner les résultats d'une recherche en ignorant les accents ?

Je vous mets le code que j'ai déjà effectué (mais qui n'ignore pas les accents) : 

function getResultHighlighted(keyword){
	var key = keyword.toLowerCase();
	var result = $(".result");
	var regex = new RegExp(key, "gui");

	
	var remplacement = '<span class="search">' + keyword + '</span>';
	for (var i = 0; i < result.length; i++) {
		var text = result[i].textContent;
		if(text.match(regex) !== null) {
		remplacement = '<span class="search">' + text.match(regex)[0] + '</span>';
		var newText = text.replace(regex, remplacement);
		result[i].innerHTML = newText;}
	}
}

La première solution qui me viens à l'esprit est de placer tes résultats dans un tableau de mots et d'y enlever les accents en sauvegardant l'original (avec l'accent) ailleurs. Ensuite tu fais tes tests avec ce tableau sans accent et tu modifie le tableau avec les accents.

function RemoveAccents(str) {
  var accents = "ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž";
  var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
  str = str.split('');
  var strLen = str.length;
  var i, x;
  for (i = 0; i < strLen; i++) {
    if ((x = accents.indexOf(str[i])) != -1) {
      str[i] = accentsOut[x];
    }
  }
  return str.join('');
}

function getResultHighlighted(keyword){
    var keys = keyword.toLowerCase().split(' ');
    var result = $(".result");
    var list_regex = keys.map(k => new RegExp(k, "gui"));
     
    for (var i = 0; i < result.length; i++)
    {
        var text = result[i].textContent;
        var avec_accent = text.split(' ');
        var sans_accent = avec_accent.map(mot => RemoveAccents(mot));
        sans_accent.forEach((elem, id) => {
          list_regex.forEach(reg => {
            if (elem.match(reg) !== null) {
              avec_accent[id] = '<span class="search">' + avec_accent[id] + '</span>';
            }
          });
        });
        var newText = avec_accent.join(' ');
        result[i].innerHTML = newText;
    }
}

si tu cherches "le gateau" et que dans tes résultats il y a "le gâteau et le pâtissier", "le gâteau" et le 2ème "le" sera en théorie surligné.

Je te remercie beaucoup, ca fonctionne !  j'ai fait un mélange entre le code que j'avais commencé et ton idée des tableaux. 

Voila le code :

function getResultHighlighted(keyword){
	var key = removeAccents(keyword.toLowerCase());
	var result = $(".result");
	var regex = new RegExp(key, "gui");

	var remplacement = '';
	for (var i = 0; i < result.length; i++) {
		var text = result[i].textContent;
		var tableau = text.split(/[(\s)]+/);
		var textLowerCase = removeAccents(text.toLowerCase());
		var tableauLowerCase = textLowerCase.split(/[(\s)]+/);
		for (var j = 0; j < tableauLowerCase.length; j++) {
			if(tableauLowerCase[j].match(regex)) {
				var place = regex.exec(tableauLowerCase[j]).index;
				if (place > 0) {
					remplacement = tableau[j].substr(0, place) + '<span class="search">' + tableau[j].substr(place, (key.length)) + '</span>' + tableau[j].substr(place + key.length);
				} else if (place === 0)  {					
					remplacement = '<span class="search">' + tableau[j].substr(place, (key.length)) + '</span>' + tableau[j].substr(key.length);
				}

				tableau[j] = remplacement;
			}		  
		}
		var newText = tableau.join(' ');
		result[i].innerHTML = newText;

	}
}

-
Edité par MarieBertaud 6 décembre 2018 à 23:54:48