jQuery autocomplete issues

Solution for jQuery autocomplete issues
is Given Below:

I am having some small issues with my autocomplete feature. When I make a selection, the position of that selection in the scrollbar is used the next time I try to make a selection, when it should actually be resetting to the top of the scrollbar.

Another issue I have is that my cursor is used to scroll through the autocomplete suggestions, so if I move my cursor to the bottom of the box, it will start scrolling down. However, I only want to scroll with the scrollbar directly or through arrow keys. I’m not sure how to do this though. I looked at some similar examples but couldn’t find a working solution with my code.

Here’s the code I have so far:

var input = document.querySelector('#tag-container input');
var text = input.value;

        type: "POST",
        url: "../FileDrop/autofill.php",
        data: {text: text},
        dataType: 'JSON',

        success: function (data) {
            var dataArray = [];

            for (var email = 0; email < data.length; email++) {
                clearButton: true,
                source: dataArray,
                selectFirst: true,
                minLength: 3
        error: function (xhr, textStatus, errorThrown) {
            console.log('Error: ' + xhr.responseText);

This is my php code:

$text = $_POST['text'];
$emailsArr = [];

$sql = "SELECT mail from emails_list WHERE mail LIKE '$text%'";

foreach ($conn->query($sql) as $email) {
    $emailsArr[] = $email["mail"];

echo json_encode($emailsArr);

This is my HTML code:

<div id="tag-container">
    <input placeholder="Enter e-mail(s) here..." id="search" autocomplete="off"/>