Sujet Précédent Sujet Suivant

Trigger script JQuery (qui filtre/highlight un texte écrit dans un input)

Résolu/Fermé
Messages postés
10
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
1 février 2021
 -
Messages postés
10
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
1 février 2021
 -
Bonsoir tout le monde. Comment pourrais-je trigger un script JQuery (qui filtre/highlight un texte écrit dans un input) avec un bouton (qui insère un texte dans cet input comme si nous l'avions écrit) s'il vous plaît ? Actuellement le bouton ajoute le texte mais ne trigger pas le script JQuery.

J'ai vu l'option .trigger ("clic") mais cela n'a pas fonctionné. Avez-vous une idée s'il vous plaît? Voici mon code actuel :

https://jsfiddle.net/hzrvwn0c/ 

<style>
mark {background: yellow;}
</style>
 
<!-- input1 -->
<input id="idinput1" name="nameinput1" type="text" />
 
<!-- text that will be filtered/highlighted when we write in input1 -->
<span id="thistext1">text1</span><br />
 
<!-- button1 -->
<button id="button1">add text2</button>

<!-- WORKS = jquery script to filter + highlight text we wrote in input1 -->
<script src="https://checkandsave.info/mark.js"></script> <!-- dependency -->
<script>
$(function(){
var $input = $("input[name='nameinput1']"),
$context = $("#thistext1");
$input.on("input", function(){
var term = $(this).val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function(){
$context.not(":has(mark)").hide();
}});}});});
</script>
 
<!-- DOESN'T WORK = script to trigger the filter/highlight jquery script with the text added by the button1 -->
<script>
$('#button1').click(function()
{$('#idinput1').val('text2')});
</script>


Merci pour votre aide.

NB: J'ai cherché d'autres solutions avec Javascript uniquement ou React JS mais cela n'a pas fonctionné non plus ou trop compliqué donc je reste sur JQuery pour le moment.

Configuration: Windows / Chrome 85.0.4183.102

3 réponses

Réponse 1 / 3
Messages postés
34716
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 janvier 2022
 4 001
Bonjour,

Je suppose.. que ce que tu souhaites faire .. c'est "rejouer" le code qui se trouve ici 
$(function(){
var $input = $("input[name='nameinput1']"),
$context = $("#thistext1");
$input.on("input", function(){
var term = $(this).val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function(){
$context.not(":has(mark)").hide();
}});}});});


Sauf que là .. il ne se lance qu'à l'ouverture de ta page.....

Si tu veux pouvoir le rejouer, il faut le placer dans une fonction et y faire appel lorsque tu en as besoin 
 var $input = $("#idinput1");
 var $context = $("#thistext1");
$(function(){
 
  $input.on("input", function(){
     highL();
  });
});

function highL(){
		var term = $input.val();
    $context.show().unmark();
    if (term) {
      $context.mark(term, {
        done: function(){
          $context.not(":has(mark)").hide();
        }
      });
    }
}

$('#button1').click(function(){
	$('#idinput1').val('text2');
  highL();
});


Sinon, tu peux aussi forcer le trigger lorsque tu remplis ton input 
$(function(){
  var $input = $("input[name='nameinput1']"),
  $context = $("#thistext1");
  $input.on("input", function(){
    var term = $(this).val();
    $context.show().unmark();
    if (term) {
      $context.mark(term, {
        done: function(){
          $context.not(":has(mark)").hide();
        }
      });
    }
  });
  $('#button1').click(function(){
    $('#idinput1').val('text2').trigger('input');
  });
});


NB: Tu remarqueras au passage... qu'un code indenté est plus facile à lire. Merci d'y penser dans tes prochains messages;
Réponse 2 / 3
Messages postés
10
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
1 février 2021
Bonjour. Merci beaucoup pour ton aide. J'ai passé toute la nuit à l'adaptation de ton script à mes besoins et je suis arrivé à ce que je voulais (pouvoir reset le champ texte/montrer une couleur + image quand le champ texte est utilisé etc). C'est parfait (même si mes codes sont certainement optimisables) : https://jsfiddle.net/923xr4qo/ .

Je vais pouvoir adapter ce code à mon site dès que possible (c'est un portail sur la vérification de l'actualité et la sauvegarde de l'information) : https://checkandsave.info/usa/index.php#h1 . 

    <!-- (dépendances) -->
    <script src = "https://checkandsave.info/mark.js"></script>

    <!--script (javascript)(unique par archive) reset / fond transparent par bouton et fond transparent par backspace -->
    <script> function reset_texte(element) {
        document.getElementById('idinput1').value = element.getAttribute('data-product-name');
    }

function background_transparent(){
    document.getElementById('idinput1').style.backgroundColor = 'transparent';
    passeinactif()
}

function nettoyage_backspace(){
    var myInput = document.getElementById("idinput1");
    if (myInput && myInput.value) {} else {
        background_transparent();
        passeinactif()
    }
} </script>

<!--script(javascript)(unique par archive) fond rose par bouton-- >
    <script> function background_rose(){
        document.getElementById('idinput1').style.backgroundColor = '#EAD1DC';
        passeactif()
    } </script>

    <!--script(javascript)(réutilisable sur toutes archives) pour image filtre visible / caché -- >
    <script> function image_cachee_par_defaut(addr) {
        document.getElementById(addr).style.visibility = "hidden";
    }
window.onload = function(){
    image_cachee_par_defaut("id_actif");
};

function passeactif(){
    document.getElementById("id_inactif").style.visibility = "hidden";
    document.getElementById("id_actif").style.visibility = "visible";
}

function passeinactif(){
    document.getElementById("id_actif").style.visibility = "hidden";
    document.getElementById("id_inactif").style.visibility = "visible";
} </script>

<!-- script(jquery)(unique par archive) pour filtrer / highlight textes des table - tr et connection boutons clefs / bouton reset -- >
    <script> $('.classimgactif').hide();
var $input = $("#idinput1");
var $context = $("table[name='archive1'] tr");

function highL(){
    var term = $input.val();
    $context.show().unmark();
    if (term) {
        $context.mark(term, {
            done: function(){
                $context.not(":has(mark)").hide();
            }
        });
    }
}
$(function(){
    $input.on("input", function(){
        highL();
    });
});
$('#button_ajout').click(function(){
    $('#idinput1').val('text2');
    highL();
});
$('#button_reset').click(function(){
    $('#idinput1').val('');
    highL();
}); </script>


Bonne journée!
Messages postés
34716
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 janvier 2022
 4 001
Visiblement tu es passé à coté de ma remarque sur l'indentation du code...
mais bon, puisque le souci est réglé, merci de mettre la discussion en RESOLUE.

Bonne continuation;
Réponse 3 / 3
Messages postés
10
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
1 février 2021
Je viens de comprendre. Je pensais que le code indenté faisait référence au choix des couleurs mais tu parlais de l'agencement du code pour une meilleure visibilité. Je vais éditer mon message et marquer le sujet résolu oui. Merci encore.
Posez votre question