jQuery-Autocomplete
jQuery-Autocomplete copied to clipboard
Onchange and onSelect are conflicting
Hi Tomas,
Let me try this one more time...
We are experiencing the same issue as the poster in the following old post: #6
However, since you've removed the onchange event built into your autocomplete, we cannot rely on the data value being passed as -1 when a suggestion is not selected like the poster was able to use.
Therefore, we've issued a jquery "on" event for when the input element changes and it is working but unfortunately, not very well in conjunction with Devbridge's Autocomplete.
We're still experiencing the problem like this:
- The user types 4 characters and several suggestions are rendered.
- The user "clicks" on a suggestion that is 10 characters long.
- The jquery "on" event fires FIRST and knows the input value as 4 characters and does a lookup based on the 4 characters because it does not know the user selected a suggestion.
- However, the user does not want the 4 characters but the 10 character value they "clicked" that will be passed into the autocomplete onselect event.
How can we tell inside the jquery "on" change event that a suggestion was "clicked" so we can bypass processing and let the autocomplete onselect process the clicked 10 character suggestion?
Again, we must support both onchange and onselect as many users type the entire value and never select a value from the autocomplete but press enter or tab key to move to next input element.
Also, we really do not want to use a setTimeout as this is often client browser performance sensitive and may not always work.
Please let me know if this more clearly describes the issue. Hopefully you can help us further so we can continue to use Devbridge's autocomplete.
Can you consider adding back in the onchange handler?
Thanks in advance...Bob Baldwin aka VSDotNetGuy
UPDATE: If anyone is interested, we've create a workaround that is working well for us based on our particular scenario. As a reminder, we need the onchange event hooked into an autocomplete textbox to determine whether the onchange was triggered by mouse selection of an autocomplete suggestion or not.
Since the ".autocomplete-suggestion" div is dynamically injected once an autocomplete is activated, we had to hook the jquery mousedown event at the document level but filter based on the class. Once we hooked the mousedown, we were able to set a global flag named autocompleteSuggestionClicked that we then inspect within the onchange event. Don't forget to reset the flag at sometime within the onchange event.
Here is the code we added into client side page load:
$(document).on("mousedown", ".autocomplete-suggestion", function () { autocompleteSuggestionClicked = true; });
In case you were wondering, the mouseup and click events are to late in the event sequence (they happen after onchange) so we had to use mousedown.
We still would like this capability added natively within autocomplete if possible.
Thanks in advance...Bob Baldwin aka VSDotNetGuy
I am struggling with the same issue. Could you please provide an example of your workaround code? It would be much appreciated
Paul