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

Résolu

Ben_Lyon Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
Ben_Lyon Messages postés 10 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Trigger script JQuery (qui filtre/highlight un texte écrit dans un input)
Photo filtre 7 gratuit - Télécharger - Retouche d'image
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Script vidéo youtube - Guide
Mettre un texte en majuscule - Guide
Transcription audio en texte word gratuit - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Ben_Lyon Messages postés 10 Date d'inscription Statut Membre Dernière intervention

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!

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Ben_Lyon Messages postés 10 Date d'inscription Statut Membre Dernière intervention

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.

Discussions similaires

input signal out of range

copie de texte

comment désactiver out of range

Votre réponse

Discussions similaires