## Minimum, Complete, Verifiable, Example 

In order to easily see this result, you'll have to open up your dev tools and throttle your network traffic so the ajax connection takes a little while

[**Here's a Demo of the issue in jsFiddle**][1]

![Throttle Network][2] [![Demo][3]][3]



## Handling Library Events (Doesn't Work)

My initial thought was you could handle this during some of the [EAC lifecycle events][4] that fired, like the `onLoadEvent` or `onShowListEvent`:



<pre><code>var options = {
 url: "https://raw.githubusercontent.com/KyleMit/libraries/gh-pages/libraries/people.json",
 getValue: "name",
 list: { 
 match: {
 enabled: true
 },
 onLoadEvent: function() {
 console.log('LoadEvent', this)
 },
 onShowListEvent: function() {
 console.log('ShowListEvent', this)
 }
 },
};</code></pre>

However, these methods don't seem to provide an option to alter the control flow and prevent future events


## Updating Source Code (Works)

Peeking into the library's source code, Easy AutoComplete does the following ...

1. [Handles keyup events][5]
2. Which then calls [`loadData`][6]
3. Which fires an [AJAX request with the provided URL][7] 

 *depending on the network and server speed, any amount of time can pass before step 4, and the input could lose focus*

4. Once the ajax promise is returned, will call [`showContainer()`][8]
5. Which [triggers the `"show.eac"` event][9] on the container
6. Which then [opens the list][10] with the selected animation


During step 6, we could add one last check to confirm the selected input still has focus before actually opening, which would look like this:



<pre><code>$elements_container.on("show.eac", function() {

 // if input has lost focus, don't show container
 if (!$field.is(":focus")) {return}

 // ... rest of method ... </code></pre>

[**Here's a working demo in Plunker**][11] which modifies the library's source code in a new file

Unfortunately, that's not a great practice as it leaves you fragile to future changes and transfers ownership of the lib maintenance to your codebase. But it does work.

I created [Pull Request #388][12] with the proposed changes, so hopefully a long term fix within the library itself will be available at some point in the future.

## Wrapper (Recommended for now)

If you don't want to muck with third party code, there are some weird workarounds to mess with the internal execution. We can't modify the `showContainer` method since it's inside a closure.

We can add another listener on the `show.eac` event so we can be a part of the event pipeline, however there are some challenges here too. Ideally, we'd like to fire before the library handler is executed and conditionally stop propagation. However, initializing EAC will both a) create the container we have to listen to and also b) attach an event listener. 

> **Note**: *Event handlers in jQuery are fired in the order they are attached!*

So, we have to wait until after the lib loads to attach our handler, but that means we'll only fire after the list is already displayed.

From the question [How to order events bound with jQuery][13], we can poke into the jQuery internals and re-order attached events so we can fire our handler before the library's handler is called. That'll look like this:

```js
$._data(element, 'events')["show"].reverse()
```

> **Note**: *Both `e.stopPropagation()` and `e.preventDefault()` won't work since they prevent future events; instead we need to take more immediate action with `e.stopImmediatePropagation()`*

So the wrapper would look like this:

```js
$("#countries").easyAutocomplete(options);

$(".easy-autocomplete-container").on("show.eac", function(e) {
 var inputId = this.id.replace('eac-container-','')
 var isFocused = $("#"+inputId).is(":focus")
 if (!isFocused ) {
 e.stopImmediatePropagation()
 }
});

$(".easy-autocomplete-container").each(function() {
 $._data(this, 'events')["show"].reverse()
})
```

[**Here's a working demo in CodePen**][14]


 [1]: https://jsfiddle.net/KyleMit/qndty7k5/
 [2]: https://i.stack.imgur.com/FaGis.png
 [3]: https://i.stack.imgur.com/7Oyqk.gif
 [4]: http://easyautocomplete.com/guide#sec-trigger-event
 [5]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1249
 [6]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1322
 [7]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1367
 [8]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1384
 [9]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1499
 [10]: https://github.com/pawelczak/EasyAutocomplete/blob/v1.3.5/dist/jquery.easy-autocomplete.js#L1039
 [11]: https://plnkr.co/edit/e63Mu95DE7LGTH56NTj3?p=preview
 [12]: https://github.com/pawelczak/EasyAutocomplete/pull/388
 [13]: https://stackoverflow.com/a/19228333/1366033
 [14]: https://codepen.io/KyleMit/pen/ZdwMEb

I'm trying set easyautocomplete on my input. Dataset i am geting from ajax json and there is some delay. If user is too fast and writes for example "Adam" and pushes tab, cursor skips to next input, but after easyautocomplete shows dialog on previous input and doesn´t hide it. Is there any way how to show easyautocomplete dialog only when i have cursor in input?

```javascript
var options = {
	minCharNumber: 3,
	url: function(phrase) {
		return "data?q=" + phrase;
	},

	getValue: function(element) {

		return element.surname + " " + element.name;
	},

	template: {
		type: "description",
		fields: {
			description: "phone"
		}
	},

	ajaxSettings: {
		dataType: "json",
		method: "POST",
		data: {
			dataType: "json"
		}
	},

	list: {
		onClickEvent: function() {
			/*Some action*/
		},
		hideAnimation: {
			type: "slide", //normal|slide|fade
			time: 400,
			callback: function() {}
		}
	},
	requestDelay: 400
};

$(".autoComplete").easyAutocomplete(options);
```