CSS selector uses element id about autocomplete.js HOT 4 CLOSED

One workaround:

Add an extra class to your input like this:

<input id="autoComplete" class="autoCompleteWorkaround" >

Then you can use the class in the selector, eg:

resultsList: {                       
            ...
            destination: document.querySelector(".autoCompleteWorkaround"),
          ...
        },

from autocomplete.js.

Hello @xtellurian,

Thanks for sharing your case and your workaround for it.

The id is mainly being used by autoComplete.js for a specific purpose which is to point at "select" the input field that has to be unique in case of multiple fields are being used at the same page.
This is considered as a good practice for selecting a unique HTML element that's not repeated, while still class selection is supported by autoComplete.js as well but not recommended.

Adding the input field style to the library's main stylesheet through the id was done just to get developers started as quickly as possible, and it could be overwritten easily by adding a class or a new id to the input field with the required styling from a separate CSS sheet, as shown in the below example.

N.B.: resultsList render destination is being handled automatically by autoComplete.js pointing at the specified selector no need to be handled manually.

• First Instance

<input id="autoComplete-01" class="autoComplete-01" type="text">

 // The autoComplete.js Engine instance One
const autoComplete_01 = new autoComplete({
  selector: "#autoComplete-01",

});

• Second Instance

<input id="autoComplete-02" class="autoComplete-02" type="text">

 // The autoComplete.js Engine instance Two
const autoComplete_02 = new autoComplete({
  selector: "#autoComplete-02",

});

Cheers and have a nice day! :)

from autocomplete.js.

Hey @TarekRaafat thanks for the reply :)

Considering the situation with multiple autoComplete engines, like so:

<input id="autoComplete-02" class="autoComplete-02" type="text">

// The autoComplete.js Engine instance One
const autoComplete_01 = new autoComplete({
  selector: "#autoComplete-01",
});

Won't the CSS fail to target correctly the element, because the CSS is targetting an element with id="autoComplete" ?

from autocomplete.js.

v8.0

from autocomplete.js.