AutocompleteFor not getting full value on change

Title:

BI{code} ?

I'm trying to connect a change event to an AutocompleteFor control in order to make an ajax call back to my controller. If I enter some text into the AutocompleteFor search field and then click on one of the items in the list, the value in that field that I want to send back to the controller isn't the full text value from the autocomplete list, it's the partial value that I had typed into the search field. But, if I use the arrow keys on my keyboard and the enter key to select an item from the list, then the correct value is sent to the controller via ajax. Is there something I can do to have this ajax function called as soon as a user picks a value from the AutocompleteFor list, either if picked by mouse click or by keyboard selection? I'm creating the AutocompleteFor with this: `@(Html.Awe().AutocompleteFor(o => o.OriginCityState).Url(Url.Action("LookupAutocompleteCities", "CRUD")))` and I'm handling the change with this: $('#OriginCityState').on('change', function () { validateOriginCityState($('#OriginCityState').val()); })

Save Changes Cancel

Sean Davidson

asked at 12 Feb 2024

• can you try to make an isolated demo so we could have a look: https://www.aspnetawesome.com/learn/mvc/CommonProblems#Isolate-the-problem
  at 12 Feb 2024 Omu
• I've added an AutocompleteFor control to a project that's available here: https://files.fm/u/mapw4xpghv The only thing on the Home view is this control. If you type in the control and pick a city name using the keyboard arrow keys and Enter key, then hit tab, an alert will pop up with the value selected. But if you start typing a city name and click on it with your mouse, the alert will only show the letters that you've typed, not the full city name.
  at 13 Feb 2024 Sean Davidson

Answers

• BI{code} ?

  To fix this you'll have to edit `awem.js` find these lines: function onSelect(item) { var selval = unesc(item.c); input.val(selval).focus(); and add this after: awe.ach(o); input.trigger('aweselect'); you'll get 2 change events when you click on the menu, 1st when you `focusout` the input after typing in it (that's how native html inputs work), and 2nd change after you've clicked on an item in the menu. You'll also have an `aweselect` event now, which you can bind to, and this event will trigger only when you select an item from the menu, click or keyboard: var input = $('#OriginCityState') input.on('aweselect', function () { console.log("Lookup City changed to: " + input.val()); });

  Save Changes Cancel

  

  Omu

  answered at 13 Feb 2024

  • That doesn't seem to do anything. I've updated the onSelect function in awem.js to now be: function onSelect(item) { var selval = unesc(item.c); input.val(selval).focus(); awe.ach(o); input.trigger('aweselect'); if (propId) { propId.val(item.k).change(); lastVal = selval; } } and updated the site.js script to match what you show above, but nothing shows up in the console when the value is changed. Is there something else that needs to be updated as well?
    at 14 Feb 2024 Sean Davidson
  • try private browsing
    at 14 Feb 2024 Omu
  • That works. What do I need to do to get this to work in non-private browsling?
    at 14 Feb 2024 Sean Davidson
  • `Ctr+Shift+R` or add `asp-append-version="true"` to your script tag, or add `?v=version` after .js ( `src="~/js/awem.js?v=123"` )
    at 14 Feb 2024 Omu

please Sign In to leave an answer