Problem with enter key and materialize autocomplete

By using the enter key, the materialize autocomplete object refreshes the whole page.

function insertar(response) {
    var ingredientes={};
    for (var i = 0; i < response.ingredientes.length; i++) {
        var tmp=response.ingredientes[i].Nombre;
        ingredientes[tmp]=null;
    }
    console.log(ingredientes);
    $('#search').autocomplete({
        data: ingredientes,
        onAutocomplete: function(txt) {
          M.toast({html: "Estoy autocompletado"});
        },
        limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
    });
}

I do not know if I need something to configure, I would really appreciate your help, thank you. edit: the html code used is the following

<nav class="buscar">
            <div class="nav-wrapper" >
                <form>
                    <div class="input-field">
                        <input id="search" type="search" class="autocomplete" required>
                        <label class="label-icon" for="search"><i class="material-icons brown600">search</i></label>
                    </div>
                </form>
            </div>
        </nav>