Discussion :

[melanie_69]

Bonsoir. 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 déclenche 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/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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.

[Toufik83]

Bonjour,

Mets le trigger("input") dans la fonction de clic comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$('#button1').click(function() {
  $('#idinput1')
  .val('text2')
  .trigger("input");
});