Where does the attributes class and id should go?

[davidmh]

Currently, they are rendered in the .autocomplete div, but I was thinking that maybe they could be more useful in the input within the .autocomplete.

Case in point:

<autocomplete ... attr-class="form-control"></autocomplete>

renders:

<div class="autocomplete form-control">
  <input ...>
</div>

Working with bootstrap or another css framework requires adding the class to the input itself. Currently there's no way of doing that.

TL;DR: move the class and id attributes to the input inside .autocomplete

[azzamallow]

• 1 for this. Ive run into the exact same problem.

the "autocomplete" class on that div is specific enough to customise elements within, a way to add class on the input field would be much handier.

[JustGoscha]

Okay, maybe'it would be good if the class would be on both? On the input and the outer div

[chesleybrown]

That wouldn't make sense to me... couldn't you just target the input if the outer div had a class?

autocomplete > input

[azzamallow]

@JustGoscha sounds fine.

@chesleybrown you can do that, the issue here is bootstrap has classes which we would like to apply to the input field

[davidmh]

@chesleybrown Yes, but it's not optimal.

This is DRY-er and stays synchronised with the styles in bootstrap:

<input class="form-control" ... />
<input class="form-control input-lg" ... />
<!--- N other custom inputs -->

Against this:

.autocomplete input {
  /* all the properties in .form-control */
}

.different .autocomplete input {
  /* overrides such as .input-lg */
}

/* N other customisations */

<input ... />
<input ... />
<!--- N other inputs -->

Which it's a bit harder to maintain and doesn't .

---

How about this?

<autocomplete
  attr-class="wrapper-class"
  attr-id="wrapper-id"
  attr-input-class="form-control input-lg"
  attr-input-id="input-id"
  ...
 ></autocomplete>

[azzamallow]

@davidmh, @chesleybrown, @JustGoscha

The wrapping div already has 'autocomplete' on there as a class. Do you have an example where using attr-class on that wrapping div to add a second class is advantageous?

[davidmh]

Nop, it's just to make it backwards compatible. Maybe someone already deployed something using this directive.

Those attributes could be marked as deprecated to warn about future deletion or simply removed. They are not really relevant anymore.

Edit:
And attr-input- seems a bit more explicit.

[JustGoscha]

@davidmh Ok, let's do it, just make sure it's still optional an works without 😉
Also update the documentation in the README.md, whoever makes the change 😃

[azzamallow]

I'm dependant on a fix so ill go ahead and do it

[azzamallow]

See: #20

Once verified could you plus update the bower version so I cna start using it?