Custom selected item and highlighted text classes

[jerrykan]

Allow users better control over how the selected item and highlighted text is displayed by letting them use their own custom classes instead of the ones hard-coded in the source code.

[jerrykan]

An example use-case of this is being able to use the default bootstrap classes without needing to include the autoComplete CSS or define separate autoComplete_selected and autoComplete_highlighted classes. ie:

var ac = new autoComplete({
  ...
  highlight: true,
  highlightedClass: "fw-bolder",
  selectedClass: "bg-light",
  resultsList: {
    className: "dropdown-menu show",
  },
  resultItem: {
    className: "dropdown-item",
  },
})

[TarekRaafat]

Hello @jerrykan,

Thanks man for this PR I love it actually.

But we need to take a collective decision on which direction for implementing those new APIs would make more sense:

1- Feature grouping:

highlight: {
    render: true,
    className: "fw-bolder",
},
resultsList: {
    render: true,
    container: (source) => {},
    className: "bg-light",
},
selection: {
    className: "bg-light",
},

2- Topic grouping:

highlight: true,
resultsList: {
    render: true,
    container: (source) => {},
}
classes: {
    highlighted: "fw-bolder",
    selected: "bg-light",
    resultsList: "dropdown-menu show",
    reslutItem: "dropdown-item",
},

3- You're most welcome if you have more ideas..

}
    ?
}

Noting that the second approach would incur a complete redesign for the API configurations. (I'm totally okay with that if it's broken already)

Let me know your thoughts.

Cheers, and have a nice day! :)

[jerrykan]

Hello @TarekRaafat personally I think the feature grouping option is the one that seems the most intuitive.

[TarekRaafat]

@jerrykan, I agree with you.
Would you update your PR accordingly or shall I take care of it?

[jerrykan]

@TarekRaafat I've pushed a commit with the suggested changes. Unfortunately I couldn't find a nice way to provide backwards compatibility for the use of the hightlight value (I don't have much experience with javascript). I'm not sure how much you care about backwards compatibility.

You may also want to check the formatting of the changes I made to the docs/README.md

[elioncho]

An example use-case of this is being able to use the default bootstrap classes without needing to include the autoComplete CSS or define separate autoComplete_selected and autoComplete_highlighted classes. ie:

var ac = new autoComplete({
  ...
  highlight: true,
  highlightedClass: "fw-bolder",
  selectedClass: "bg-light",
  resultsList: {
    className: "dropdown-menu show",
  },
  resultItem: {
    className: "dropdown-item",
  },
})

Do you have an example of a full integration with Bootstrap 5 or 4?

[TarekRaafat]

Hello @elioncho,

Here is a simple Bootstrap 5 styling example that I've prepared for you.

I hope this answers your question, please let me know if it does not.

Have a nice day! :)

[elioncho]

Hello @elioncho,

Here is a simple Bootstrap 5 styling example that I've prepared for you.

I hope this answers your question, please let me know if it does not.

Have a nice day! :)

Thanks a lot for the example, I am already implementing it. I have a question about it:

Once the dropdown is shown, the content below it is pushed down (happens to me too). I see that is not the case in this other demo you have shared before https://tarekraafat.github.io/autoComplete.js/demo/ Why is the content pushed down in the bootstrap 5 demo?

[TarekRaafat]

You can easily fix that behavior by adding position-absolute class to the list from bootstrap and then you'll need to handle the stack order by adding another class with the value of z-index: 1; or set an attribute with the same value directly to the list since bootstrap doesn't support z-index.

I have updated the example with this fix as well to make it easier for you.

There could be a better solution using bootstrap but unfortunately, I don't have enough experience with it.