algolia Results from autocomplete

Question

I am new to using algolia, I have been following js autocomplete guide and I have got to the point where my results are displayed but only for less than a second and then they dissapear, and search unclick itself so in order to type something else I need to click on the search box. I have tried the code that is provided in he documentation here: https://www.algolia.com/doc/guides/search/auto-complete/#multi-category-user-interface

However that didn't work, I had to use algolia search lite otherwise I kept getting some errors in the algolia.js

So I link scripts:

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>

Added a search:

                    <div class="aa-input-container navbar-right" id="aa-input-container">
                        <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for players or teams..." name="search" onkeyup="search_data(this.value)" autocomplete="off" />
                            <svg class="aa-input-icon" viewBox="654 -372 1664 1664">
                                <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
                            </svg>
                    </div>

and in search js:

var client = algoliasearch("***", "****")
var businesses = client.initIndex('businesses');
var films = client.initIndex('films');
function search_data(search_value) {
autocomplete('#aa-search-input', {}, [
    {
      source: autocomplete.sources.hits(businesses, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Businesses</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.name.value + '</span><span>'
              + suggestion._highlightResult.type.value + '</span>';
        }
      }
    },
    {
      source: autocomplete.sources.hits(films, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Films</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.title.value + '</span><span>'
              + suggestion._highlightResult.times.value + '</span>';
        }
      }
    }
]);
}

So how can I fix the problem with results dissapearing and search box un-clicking itself on each character?

Also a different question, if I have in mysql tables relations can you somehow use that in the search? so for each film I would like to output business.name. They are linked using business_id in mysql but I don't know if you can do that in algolia. Thanks!