Timeline on autocomplete?

[joshterrill]

Do you have a timeline on when autocomplete feature will be done? Is there something that I can do to help with it? I would like to use this component in a project, but I need some sort of typehead/autocomplete. And your library seems to be the closest to it.

[Gbuomprisco]

Hi @joshterrill,

I've been deferring this for a while :) I'll probably be getting it done this weekend, hopefully :)

[joshterrill]

Okay. I was thinking, another feature that would be kind of cool would be to be able to integrate the material 2 labels in with it. Right now, I'm kinda faking it by creating a label, and doing some styling, but I think it's something that makes sense to do. See this screenshot:

The top dropdown is one from your library, the bottom one is just a regular material dropdown. I intend on swapping out all the material dropdowns I have (because the labels for them are broken when using formControl values instead of ngModel). But I've done a couple of things:

1. I made the border on the bottom the same length and size as the standard material ones
2. I made the caret the same caret as the one for the material dropdowns
3. The label I created by just making a <label> and give it some styling above the dropdown.

Here's the styles I have:

.pseudo-label {
    color: rgb(63,81,181) !important;
    font-size: 12px !important;
    top: 4px !important;
    visibility: visible !important;
}

.ng2-dropdown-container {
    border-bottom: 1px solid rgba(0, 0, 0, 0.38) !important;
}

.ng2-dropdown-button {
    display: block !important;
    font-size: 16px !important;
    font-family: "Helvetica","Arial",sans-serif !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    width: 100% !important;
    background: 0 0 !important;
    text-align: left !important;
    color: inherit !important;
}

.ng2-dropdown-button span.caret {
  background: url('/images/down-arrow.png') !important;
  position: absolute;
  right: 7px;
}

.ng2-dropdown-menu-container {
  width: 305px !important;
}

The down-arrow.png I got just by taking a screenshot of the material one and stripping out whitespace. And here is my code:

<label class="pseudo-label" for="gender">*Gender</label>
<ng2-select id="gender" [placeholder]="'Choose Gender'" [options]="genders" formControlName="gender"></ng2-select>

Not sure if this is stuff you'd think you want to pursue. This is just stuff that I modified to make it look more like the rest of the components.

[joshterrill]

It would also be really nice if this component worked with Angular 2's form validation module.