Create a nice search bar UX with vue-search-input
Tags: javascript, vue, webdev, ux
Published: 2022-01-30 20:21:46

The page search input, also named search box, search bar, quick search, quick find etc, is an integral part of any website or web app. Usually positioned at the top of the page (either left, center or right) the search bar is often the first interaction a user has with a website, as it provides a quick way to find information.

## UX (best) practices
There are a lot of good write-ups such as [this one](https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448) by [Dawson Beggs](https://twitter.com/dawsonbeggs) posted at UX Collective, regarding how a good search bar UX must be. Every website/web-app implements the global search input differently though. Let's take a quick look at how some of the popular ones are handling it.

### Storybook
Storybook is a widely used, open source tool for building UI components in isolation.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmg9hh7lk8mzob7wb3ts.png)
- Magnifier icon on the left side
- Clear icon `x`
- Pressing the `esc` does not `blur` the input, but clears the input's text
- It includes a focus icon `\` which disappears on input `focus`
- The `\` key moves `focus` to the input also selecting the text inside it

### GitHub
GitHub is used by over 73 million developers to host their Git repositories.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2bqvonx184rjweaar5i.png)
- No magnifier icon on the left or the right side
- No clear icon `x`
- The `esc` key `blur`s the input, but does not clear the input's text
- It includes a focus icon `\` which disappears on input `focus`
- The `\` key moves `focus` to the input without selecting the text

### Gmail
Gmail is probably the most popular free email service.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqzfxmn6cj2216yh8mer.png)
- Magnifier icon on the left side
- Clear icon `x`
- Search options icon on the right side of the input
- The `esc` key `blur`s the input but does not clear the input's text
- There's no focus icon `\`
- The `\` key  doesn't move `focus` to the input

> Your website, depending on the UX that you are trying to achieve, might require a different combination of these features.

Have no fear though, if you are using Vue.js 3 as your frontend framework (and you should 😉), [vue-search-input](https://github.com/kouts/vue-search-input) has got you covered.

## vue-search-input
`vue-search-input` is a Vue.js 3 search input component, inspired by the global search input of [Storybook](https://storybook.js.org/) and [GitHub](https://github.com). Although headless by default, it includes a sample stylesheet as well as all of the necessary features so that you can create the perfect search bar experience for your use-case.

### Features at a glance
- Focus on the search input at any time by pressing the `/` key on the keyboard.
- Includes a default CSS styling but it's also easy to bring your own styles too.
- Displays an `x` icon on the right side of the search input, used for clearing the text when there's a value typed inside.
- The search text gets cleared by pressing the `esc` key when the search input has focus (configurable).
- Completely customizable behavior via `props`.
- Customizable icons via `slots`.

### Installation and Usage

Install with `npm`
```bash
npm i vue-search-input
```

Import it in your app
```js
import SearchInput from 'vue-search-input'
```

Optionally import styles
```js
import 'vue-search-input/dist/styles.css'
```

Use it inside the template with a bound reactive variable
```html
<SearchInput v-model="searchVal" />
```

### Customization with `props` and `slots`

#### Props
You can customize the behavior and turn features on/off using props.

| Name | Type | Default | Description
| :--- | :--- | :--- | :--- |
| type | string | `search` | The type of the input field. Allowed types are `search` and `text` |
| modelValue (v-model) | string | The input's value | `''` |
| wrapperClass | string | The default CSS class of the wrapper div | `search-input-wrapper` |
| searchIcon | boolean | Displays the "search" icon | true |
| shortcutIcon | boolean | Displays the "shortcut" icon | true |
| clearIcon | boolean | Displays the "clear text" icon | true |
| hideShortcutIconOnBlur | boolean | Whether to hide the shortcut icon when the input loses focus | true |
| clearOnEsc | boolean | Whether to clear the input field when the `esc` key is pressed | true |
| blurOnEsc | boolean | Whether to takes the focus out of the input field when the `esc` key is pressed | true |
| selectOnFocus | boolean | Selects the input's text upon `/` keypress | true |
| shortcutListenerEnabled | boolean | Enables the functionality for the `/` keypress | true |
| shortcutKey | string | The `key` for the shortcut functionality | `/` |

#### Slots
`vue-search-input` includes some default icons but you can also customize them to suit your needs using the available `slots`.

| Name | Description | Default content
| :--- | :--- | :--- |
| search-icon | Slot for the search icon | `<i class="search-icon search"></i>` |
| shortcut-icon | Slot for the shortcut icon | `<i class="search-icon shortcut" title='Press "/" to search'></i>` |
| clear-icon | Slot for the clear icon <br />`{ clear: () => void }` the function that clears the input |  `<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>`|
| append | Adds an item inside the input wrapper, before the search icon | - |
| append-inner | Adds an item inside the input wrapper, after the search icon | - |
| prepend | Adds an item inside the input wrapper directly after the input element | - |
| prepend-outer | Adds an item inside the input wrapper directly after the clear icon | - |

### Demo with examples
Checkout an [online demo](https://vue-search-input.vercel.app) of `vue-search-input` which includes examples that mimic the search bar functionality of Storybook, GitHub, Gmail and YouTube!
https://vue-search-input.vercel.app

If you liked `vue-search-input` it would be awesome if you visit its [repo on GitHub](https://github.com/kouts/vue-search-input) and give it a star.

**Thanks for reading!**