11521 sujets

JavaScript, DOM et API Web HTML5

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

je suis désolé je suis de la vieille école et je n'ai rien compris Smiley biggol
Tu peux expliquer doucement ce que tu veux faire ?

tu veux ajouter un input avec le bouton ?
Ou bien remplacer le texte de l'input ?

En tout cas tu as l'air de bien te compliquer la vie avec ce magma en Jquery Smiley lol
Bonsoir. Désolé de ne pas avoir été clair. Ton aide est précieuse car les érudits de JQuery sont rares de nos jours.

Ce que j'ai actuellement =
- Quand j'écris le mot "text1" dans mon input mon script JQuery filtre/mets un background jaune sur le mot "text1" visible entre les balises span (id="thistext1") . C'est un menu de recherche classique (si j'écris autre chose que "text1" dans mon input alors mon script JQuery ne trouvera pas de mot/ne mettra pas de background jaune). Ce filtrage/background jaune fonctionne très bien quand j'écris au clavier.

Ce que je recherche =
- J'aimerais créer un bouton qui "remplace la frappe au clavier", c'est-à-dire un bouton qui insère le mot "text1" dans l'input et que le script JQuery réagisse comme si je l'avais écrit au clavier moi-même en appliquant le filtre/background jaune sur le mot "text1" visible entre les balises span (id="thistext1"). En l'état mon script ajoute le mot "text1" dans l'input mais n'applique pas le filtrage/background jaune.

J'espère avoir été plus précis dans ma demande.

J'ai passé du temps hier et toute la journée d'aujourd'hui. C'est difficile de comprendre le fonctionnement de JQuery. J'ai trouvé des {$('#idinput1').trigger( "test", [ "text2" ] )});, des $('#myTextbox1').on('input', function() {, peut-être que je ne suis pas loin mais c'est très compliqué.
Re,

Bon ce qui est compliqué c'est que JS ne détecte que quand c'est un changement 'manuel'.
Du coup il faut ajouter une vérification supplémentaire ( j'ai remis en JS natif ).
J'imagine que ce n'est pas exactement ce que tu voulais entendre mais le résultat est là Smiley lol
https://codepen.io/exemple/pen/RwGpqdb
Merci à toi. C'est vrai que cela se rapproche de ce que je veux lol. Cependant il n'y a plus de filtrage et je pourrai difficilement ajouter d'autres mots (idinput1.value = thistext1.innerText; sinon mon code va faire 10000 lignes lol). Regarde l'application concrète de mon besoin (dans la section "Sujets archivés" en bas)= https://checkandsave.info/usa/index.php#h1 . C'est mon site où je liste l'actualité. Les visiteurs peuvent rechercher/filtrer des mots d'une section. Je vais étudier ton script et continuer de chercher, merci pour ton aide.
Modifié par Ben_Lyon (15 Dec 2020 - 21:05)
Merci beaucoup. Je vais lire ton code pour essayer de le comprendre afin d'y ajouter le filtre des textes par le menu "rechercher".

(J'étais justement en train de regarder un nouveau script qui parvient à trigger le script JQuerry https://jsfiddle.net/su39hb45/). On va bien finir par y arriver lol!
Modifié par Ben_Lyon (15 Dec 2020 - 23:15)
Hello,
j'ai fait exactement le rendu de ton lien !
Je n'ai pas trop compris ton dernier résultat, ça fonctionne comme tu voudrais ?