From 21b21dcfc769e2e6ac50c7ada47d16502865c885 Mon Sep 17 00:00:00 2001 From: Chang-Woo Rhee Date: Wed, 14 Aug 2024 11:10:22 -0700 Subject: [PATCH] Update README.md for Tailwind css Add customizing example for Tailwind css --- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/README.md b/README.md index 17433a7..c4d64fa 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,47 @@ class CustomAutocomplete extends Autocomplete { application.register('autocomplete', CustomAutocomplete) ``` +### Tailwind css + +The autcomplete default css is Bootstrap, If you use another css framework such as Tailwind css or so on, You can customize Autocomplete.js with html. + + +```javascript +# app/javascript/controllers/application.js + +import { Application } from "@hotwired/stimulus" +import { Autocomplete } from 'stimulus-autocomplete' + +const application = Application.start() + +class CustomAutocomplete extends Autocomplete { + + get selectedClassesOrDefault() { + return this.hasSelectedClass ? this.selectedClasses : ["bg-teal-200"] # cursor color is bg-teal-200, you can change this code. + } +} + +application.register('autocomplete', CustomAutocomplete) + +``` + +```html +# your ajax autocomplete url's result + +
  • <%= p.text %>
  • +``` + +```html +# Search Input HTML + +
    + + + +
    +``` + + ## Examples - [The examples directory](https://github.com/afcapel/stimulus-autocomplete/tree/main/examples) contains some examples of how to use the library.