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 2 months ago

• can you try to make an isolated demo so we could have a look: https://www.aspnetawesome.com/learn/mvc/CommonProblems#Isolate-the-problem
  2 months ago 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.
  2 months ago 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 2 months ago

  • 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?
    2 months ago Sean Davidson
  • try private browsing
    2 months ago Omu
  • That works. What do I need to do to get this to work in non-private browsling?
    2 months ago 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"` )
    2 months ago Omu

please Sign In to leave an answer