javascriptjqueryautocompletealgolia

jQuery Algolia autocomplete enter key


Currently the autocomplete action when pressing the Enter key on a selected element is to put that elements value into the input box.

How can I modify the behavior so that pressing the Enter key on an element triggers that elements embedded url. To simplify I'd like to make the Enter key have the same behavior as a mouse click on a returned element.

Thanks

$('#search_input').autocomplete(
        { 
            //autoselect: true,
            //autoselectOnBlur: true,
            hint : false,
            templates: {
                dropdownMenu: '#my-custom-menu-template',
            }
        }, 
        [
            {
              source: $.fn.autocomplete.sources.hits(indexProducts, { hitsPerPage: 5 }),
              name : 'products',
              displayKey: 'name',
              templates: {
                suggestion: function(suggestion) {                    
                  return '<a href="'+suggestion.url+'">'+suggestion._highlightResult.name.value+'</a>';
                }
              }
            },
            {
              source: $.fn.autocomplete.sources.hits(indexCategories, { hitsPerPage: 5 }),
              name : 'categories',
              displayKey: 'name',
              templates: {
                suggestion: function(suggestion) {
                  return '<a href="'+suggestion.url+'">'+suggestion._highlightResult.name.value+' en <b>' + suggestion.parent_name+'</b></a>';
                }
              }
            }
        ]).on('autocomplete:selected', function(event, suggestion, dataset) {
    console.log(suggestion, dataset);
  });

Solution

  • Solution add autocomplete:selected event:

    $('#search_input').autocomplete(
            { 
                //autoselect: true,
                //autoselectOnBlur: true,
                hint : false,
                templates: {
                    dropdownMenu: '#my-custom-menu-template',
                }
            }, 
            [
                {
                  source: $.fn.autocomplete.sources.hits(indexProducts, { hitsPerPage: 5 }),
                  name : 'products',
                  displayKey: 'name',
                  templates: {
                    suggestion: function(suggestion) {                    
                      return '<a href="'+suggestion.url+'">'+suggestion._highlightResult.name.value+'</a>';
                    }
                  }
                },
                {
                  source: $.fn.autocomplete.sources.hits(indexCategories, { hitsPerPage: 5 }),
                  name : 'categories',
                  displayKey: 'name',
                  templates: {
                    suggestion: function(suggestion) {
                      return '<a href="'+suggestion.url+'">'+suggestion._highlightResult.name.value+' en <b>' + suggestion.parent_name+'</b></a>';
                    }
                  }
                }
            ]).on('autocomplete:selected', function(event, suggestion, dataset) {
                    location.href = suggestion.url;
                });