Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021 - Modifié le 15 déc. 2020 à 18:05
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021 - 16 déc. 2020 à 11:43
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
jordane45 Messages postés 37280 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2023 4 550
15 déc. 2020 à 22:46
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;
0
Réponse 2 / 3
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021
Modifié le 16 déc. 2020 à 11:47
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!
0
jordane45 Messages postés 37280 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2023 4 550
16 déc. 2020 à 11:34
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;
0
Réponse 3 / 3
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021
16 déc. 2020 à 11:43
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.
0