JQuery listener to select autocomplete in a text box

Question

I have setup jQuery listeners that listen for form input in the type="text" field. However, when the user selects a parameter from the autocomplete drop-down list (i.e., the Value they entered earlier that was remembered for future use), the listeners below do not collect this value.

Here is my current code:

 $('#text-input').on("keyup change paste", function() { var textInput = $(this).val(); // do something with textInput }); 

The above steps are for inserting and entering text, but not if the option is selected from the list of prompts with a drop-down list.

Can someone tell me what the listener needs to add?

Greetings.

---

My decision

autocomplete I tried using the autocomplete , I found that this did not work in my script, so instead I added the following code inspired by the accepted answer.

 var timer = 0; $('#text-input').on("keyup change paste", function() { if (timer != null) { clearTimeout(timer); timer = setTimeout(function() { var textInput = $(this).val(); // do something with textInput }, 1000); } }); 

An added benefit of this is that my text input takes a URL and then uses it to load additional content onto the page. Having a set timeout means that the script is not constantly trying to load the URL while the user is still typing it.

Answer 1

You need to add a listener to the list of sentences (either throughout the list, with delegation , or for each value in the queue). Whenever a click event occurs on a sentence, you update the value in your search field.

---

I just realized that you mean the default suggestions for the browser (i.e. the autocomplete attribute). This answer may help: Javascript detects a browser autofill value selection . It checks the input for values ​​when it has focus, so even if autocomplete does not cause any events, this change is detected.