Question

I have a list menu in my php page. In this list menu i have an onChange event, you can see below.

<select name="company" onChange="getproduct(this)">

The above event get product name of selected company. but now i want to change this list menu to autocomplete. I try below code but its not fetching anything, can anyone help me plz

<input type="text" name="company" id="company"  onkeyup="getproduct(this)"/>

Answer 1

Generally speaking, using the html attributes for javascript events is bad practice. Since you are using jQuery anyway, you should do something like this in an external script:

$('#company').on('change keyup input', function() { getproduct(this); });

I’ll break it down now.

$('#company') selects the element that has an ID of “company.” This lets you work with that object with javascript by changing it or attaching event listeners.

.on(...) attaches event listeners to the selected objects. It can be used in a few different ways, but the most basic way (which is how we are using it here), it takes two parameters, the first is a space separated list of events to listen for and the second is a callback function to execute when these events happen on the selected element.

change is an event that is triggered when the input element has changed its value and then lost focus. This can be a useful event to use in case the user didn’t change the input by typing (possibly pasting through the context menu).

keyup is an event that is triggered when a key is pressed and then released. See also keydown and keypress.

input is a cool new HTML5 event that is designed to listen to user input on an element. This is important to use because it was designed specifically for what you are trying to accomplish. (Notably, the input event is triggered when the spinner arrow buttons are clicked on the number input types.) You still want to use the other events as fallbacks in case the input event isn’t supported in the user’s browser.