Implement custom renderer search using javascript

[GilbertHG]

Is there any example how to implement the custom renderer using javascript? not jsx or react

[sarahdayan]

Hey @GilbertHG, we don't have an example for this because we already provide a custom renderer for JavaScript—autocomplete-js. We strongly recommend that you use it if you plan on implementing an autocomplete in a vanilla JavaScript app.

Note that if your app doesn't use JSX, it's totally fine because Autocomplete accepts templates as tagged templates.

[GilbertHG]

Hello @sarahdayan, thanks for the response, but the problem is I can't customize the search fields with JavaScript—autocomplete-js, I have more than one search fields, and I should wrap it into one form

[sarahdayan]

@GilbertHG Do you have an image of what you're trying to build? There might be easier ways for you to achieve the result you want than implementing a custom renderer, but I'd like to make sure I understand your use case better before steering in one direction or another.

[GilbertHG]

Something like this, so it have some fields. and I need to make them into one form.

[sarahdayan]

When does the autocomplete open? How does it aggregate data from all the fields? What happens when you click "Search"?

From your image, I could imagine a scenario where you have a single autocomplete for the "where to" field that suggests destinations and hotels. Possibly, if you already filled "stay dates", "guests" and "rooms", it could use that information to filter on hotels that still have the right number of available rooms for the given dates.

So, basically, you don't need multiple inputs in the autocomplete, but you need your autocomplete to access data from other fields. To do so, you can use the Context API of Autocomplete to store data from your other fields as they change, and reuse it anywhere inside Autocomplete.

You can see an example here.

[GilbertHG]

Let me check it, thanks