Easy Auto Complete Issue - Displays without Focus

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>
<h3>Easy Auto Complete Issue - Displays without Focus</h3>
<h5><b>Note</b>: You'll need to throttle your Network Speed in Dev Tools to observe </h5>


<div class="form-control">
  <label>Autocomplete</label>
  <input id="countries"/>
</div>

<div class="form-control">
  <label>Additional Field</label>
  <input id="states"/>
</div>












<div style='position:fixed;bottom:0;left:0;background:lightgray;width:100%;padding:3px;'>
  About this question on SO: <br>
  <a href='https://stackoverflow.com/q/56958864/1366033'>
    How show easyautocomplete dialog only if cursor is in input
  </a>
</div>

CSS

.form-control {
  display: flex;
  flex-direction: column;
  padding: 10px;
}


input {
    border-color: #ccc;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    color: #555;
    float: none;
    padding: 6px 12px;
    width: 200px;
}

JavaScript

var options = {
  url: "https://raw.githubusercontent.com/KyleMit/libraries/gh-pages/libraries/people.json",
  getValue: "name",
  list: {	
    match: {
      enabled: true
    },
    // events - http://easyautocomplete.com/guide#sec-trigger-event
    onLoadEvent: function() {
      console.log('LoadEvent', this)
    },
    onShowListEvent: function() {
      console.log('ShowListEvent', this)
    }
  },
};

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