Unexpected JS behavior when clearing input field value

I am using some JQuery Combobox that you can check out here: http://ift.tt/1B1qPra

As you can see, you can start typing and get the results filtered. However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.

I changed that code and added this JS on the click event of the list:

onclick="document.getElementById('statesCombo-ddi').value='';"

This line basically finds the input by id and sets its value to an empty string. You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.

This has a weird behavior:

1. If I SELECTED an element from the list, it clears the value and everything works correctly.


2. If I TYPED some letters and then selected a value from the list, no item is shown in the list after clicking.

What's wrong with it?