Не работает авто заполнение

Хочу добавить автозаполнение. Все работает, но после того как добавляю material дизайн, автозаполнение не работает. Как быть?

<h:head>
    <title>Facelet Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <h:outputScript library="js" name="auto.js"></h:outputScript>
</h:head>

Вот тело:

<h:body> 
    <h:form id="myForm">
        <h:inputText  id="username"/>
        <p:poll></p:poll>
    </h:form>
</h:body>

А теперь добавляю material дизайн и автозаполнение перестает работать:

<h:head>
    <title>Facelet Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <h:outputScript library="js" name="auto.js"></h:outputScript>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"></link>
    <!-- Import jQuery before materialize.js -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
</h:head>