jQuery autocomplete issues

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:

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

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

            for (var email = 0; email < data.length; email++) {
                dataArray.push(data[email]);
            }
            $("#search").autocomplete({
                clearButton: true,
                source: dataArray,
                selectFirst: true,
                minLength: 3
            });
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('Error: ' + xhr.responseText);
            console.log("Failed");
        }
    });

This is my php code:

<?php
$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>
    <input placeholder="Enter e-mail(s) here..." id="search" autocomplete="off"/>
</div>

source https://stackoverflow.com/questions/68595859/jquery-autocomplete-issues