Feature request: Autocomplete with input

SuperDJ commented 9 years ago

Hello everyone,

I have seen some issues / requests about an autcomplete for form input. I have the same request but in the mean time this might help. I have made this using jQuery UI autocomplete plugin the css required is below. To make this work no jQuery UI theme should be active. I have styled it like the <select>

.ui-autocomplete {
    @extend .z-depth-1;
    background-color: #fff;
    position: fixed; // To prevent li elements go to the end of the screen

    li {
        @extend .col, .s12, .l4; // Edit this the way you like it. or to make it the same width as the input
        font-size: 1.2rem;
        color: #26a69a; // Teal color
        line-height: 1.5rem;
        padding: 1rem 1rem;

        &:hover {
            background: #eee;
        }
    }
}
    // Remove unwanted text comming from plugin
.ui-helper-hidden-accessible {
    display: none;
    visibility: hidden;
}

marciosouzajunior commented 9 years ago

Nice job!! Would be perfect get some like this: https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field

SuperDJ commented 9 years ago

@marciosouzajunior sorry for the late response but I had a bussy time. I made a pull request for 2 feature requests. I'm not done with the autocomplete yet.