Skip to main content

Search and Top Navigation

#15407 new bug ()

Opened July 23, 2021 04:35PM UTC

Last modified July 23, 2021 04:36PM UTC

JQuery UI Autocomplete : I can't select element with mouse click but only with keyboard arrows

Reported by: dsi-verspieren Owned by:
Priority: blocker Milestone: none
Component: ui.autocomplete Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

Hello,

I am using JQuery UI Autocomplete to select an address from a list.

I can navigate in the list from the arrows of my keyboard but not select from the mouse click.

Here is the code


function initJqueryAutocomplete(scope, element) {
        // Initialisation autocomplete
        jQuery(element).find('.autocomplete-street').autocomplete({
          appendTo: $(".autocomplete-street").parent(),
          //appendTo: $(".autocomplete-street"),
          source: function (request, response) {
            if (scope.model.country === UserValues.COUNTRY_SLUG_FR) {
              jQuery.ajax({
                url: AppConfigService.soapBaseUrl + '/backoffice/' + AppConfigService.apiVersion +
                '/api/addresses/' + 'FR' +'/zips/' + scope.model.zipcode + '/streets',
                type: 'GET',
                data: {
                  q:  request.term
                },
                beforeSend: function (xhr) {
                  var accessToken = UserService.getAccessToken();
                  xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
                  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
                },
                success: function (data) {
                  response(data);
                }
              });
            }
          },
          minLength: 2,
          select: function (event,ui) {
            scope.model.street = ui.item.street;
            jQuery(this).val(AddressFactory.removeAccents(ui.item.street));
            alert("selected!");
            return false;
          },
          create: function () {
            if (jQuery(this).data('ui-autocomplete')) {
              jQuery(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                // uppercas & remove accents
                let streetName = AddressFactory.removeAccents(item.street);
                return $('<li>')
                  .append('<a>' + streetName + '</a>')
                  .appendTo(ul);
              };
            }
          },
          focus: function (event, ui) {
            jQuery(this).val(AddressFactory.removeAccents((ui.item.street)));
            alert("focused!");
            return false;
          }
        });
      }

I have all the css and js files called of course.

Thank you for your help

Attachments (0)
Change History (1)

Changed July 23, 2021 04:36PM UTC by dsi-verspieren comment:1

priority: minorblocker