How to inicialize clearButton (x) when the field comes with default value

[jasomdotnet]

Hi Tomas,

now, the clearButton is displayed only when the value is supplied for the input over autocomplete. What is great for post add.

On post edit, the field comes already with the value and there is no clearButton. Can you add detection if the autocomplete field has default value so clearButton is displayed automatically?

[tomickigrzegorz]

By default value you mean you are adding to the input text field?

document.querySelector("#search").value = "test";

[jasomdotnet]

By default value I mean that input comes with the value. Html looks like this :

<p class="form-row form-group autocomplete validate-required" id="locality_field"  >
<label for="locality" class="input-label">Locality&nbsp;<abbr class="required" title="Required">*</abbr></label>
<span class="input-wrapper">
<div class="suggestion">
<input type="text" class="input-text form-control" name="n[locality]" id="locality" placeholder="Krakow, Poland"  maxlength="255" aria-describedby="locality-description" value="Rzeszów, Rzeszów County, Podkarpackie Voivodeship, Poland" required>
</div><!-- /.suggestion -->
<span class="description form-text text-muted" id="locality-description" aria-hidden="true">City, municipality... start typing, and the site will offers suggestions.</span>
</span>
</p>

Namely part

value="Rzeszów, Rzeszów County, Podkarpackie Voivodeship, Poland"

When user edit existing post, fields are prefilled with previous values.

[tomickigrzegorz]

So as I thought, but I did it with js and you added vlaue in html :)

The simplest solution is:

new Autocomplete("search", {});

const searchInput = document.querySelector("#locality");
const autoClear = document.querySelector(".auto-clear");
autoClear.classList.remove("hidden");
autoClear.addEventListener("click", () => {
  searchInput.value = "";
  autoClear.classList.add("hidden");
});

At the moment it is not possible to check the field when calling Autocomple.

It is possible that in the future I will add this functionality to the library https://github.com/tomik23/autocomplete
because this library is used here.

[jasomdotnet]

Vďaka for the snipped.

Few words about autocomplete lib:

I was looking something for substitution of Drupal autocomplete functionality for my CMS and your lib perfectly fits my needs for remote (fetch) address geocoding.

#5 (comment)

It's almost perfect out of the box. It won against https://github.com/TarekRaafat/autoComplete.js Do you have ko-fi?

[tomickigrzegorz]

"Do you have ko-fi?' ??? ;)

[jasomdotnet]

https://ko-fi.com/resmushit

[tomickigrzegorz]

@jasomdotnet A new version has arrived 😁 - clear-button-on
Now it is enough to add a parameter in the configuration clearButtonOnInitial: true

[jasomdotnet]

What a speed ;-)

[tomickigrzegorz]

Maybe fast but I don't know if thoroughly tested?
How will some mistake be on you 🤣