onBlur prop

[devmartynov]

it would be great if you add possibility to pass onBlur prop for handling this event.

I made PR

[kraaden]

Not sure if it make sense to include the functionality into the widget. This can easily be achieved by extending autocomplete in the following way:

function extendedAutocomplete(settings) {
	function handler(e) {
		console.log('blur');
	}
	settings.input.addEventListener('blur', handler);
	var result = autocomplete(settings);
	return {
		destroy: () => {
			settings.input.removeEventListener('blur', handler);
			result.destroy();
		}
	}
}

Then just call extendedAutocomplete({...}) instead of autocomplete({...}) and it will work exactly as in the pull request.

You can test it here

[3rd1t]

there is a way to get the option with "selected" class on blur?

[kraaden]

@3rd1t The widget doesn't support this out of the box, so a workaround is needed to achieve something like this. You can use the code below to achieve it:

function extendedAutocomplete(settings) {
	function handler(e) {
		var selected = settings.container.querySelector('.selected').item;
		console.log('The selected item was: ' + selected.label);
	}

	settings.input.addEventListener('blur', handler);
	settings.container ||= document.createElement('div');
	settings.render = function render(item) {
		var itemElement = document.createElement('div');
		itemElement.textContent = item.label || '';
		itemElement.item = item;
		return itemElement;
	}
	var result = autocomplete(settings);
	return {
		destroy: () => {
			settings.input.removeEventListener('blur', handler);
			result.destroy();
		}
	}
}

https://jsbin.com/liyixoxelo/edit?html,js,output