dbz-compsearch

Search Web Component

Search is a tiny web component built using StencilJS that lets users search through a list of data, and the component will filter out options as the user types.

How to Use

1. Run npm install --save dbz-compsearch
2. Add the following import to your index.html file <script src="node_modules/dbz-compsearch/dist/comp-search.js"></script>
3. Use the custom <comp-search> tag to add the search component.

Properties

The Search Component has a few customizable properties.

1. sort: If "true", the filter will also sort options alphabetically.
2. empty: If defined, the "No results found" text will be replaced with whatever is entered here
3. items: This takes in a string of comma separated values that will be converted to an array (TODO: Find a better was to pass in the array)

Example:

<comp-search
    sort="true"
    empty="No Results"
    items="Apples, Bananas, Carrots, Dates">
</comp-search>

Modifying

(Taken from the StencilJS repo)

To start a new project using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin

and run:

npm install
npm start

To view the build, start an HTTP server inside of the /www directory.

To watch for file changes during development, run:

npm run dev

To build the app for production, run:

npm run build

To run the unit tests once, run:

npm test

To run the unit tests and watch for file changes during development, run:

npm run test.watch