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.
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>
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.
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.
