Implement search with suggestion feature.

Overview

TIP
This component is rewritten for more features and decoupling.
Component Name: vx-auto-suggest
Use case: Create search with suggestion
Path: src/layouts/components/vx-auto-suggest/VxAutoSuggest.vue
Is Globally Registered: false

Using Component

WARNING
Style may look different due to some issues. But you can always check Vuexy Admin demo for proper style of how everything will look in your app.

Passed Data Structure

There is data structure that you have to follow to make vx-auto-suggest work. data prop accepts object. The structure is as followed.

  • key: Refers to search field. vxAutoSuggest will search in this field and return result.
  • top level properties (Groups) (e.g. pages & files): These are groups and result will also be returned in group.

TIP
Still if you have any confusion, check out src/layouts/components/navbarSearchAndPinList.js file.

Upon Selection

vx-auto-suggest fires three events.

  • selected:
    This event is fired when user select any list item. emitted event have list item’s object passed to event. So, you can grab that event and perform whatever actions you like.
  • input:
    This event is emitted when input is changed.

  • closeSearchbar:
    This event is emitted when user presses esc key. Common use case of this event is to close search input.

    Using Slots & Groups

    As you already know from data structure of vxAutoSuggest source, top level property is group. e.g. “pages” & “files” are two group in above example. Results have default slot for rendering it self. However, you might need to customize how those returned results should be rendered in your project.

  • group slot: Using this slot you can customize how your group label should get rendered.

  • No Result Slot: You can also show custom message if there’s no result of search.

  • result slot: VxAutoSuggest provides dynamic slots so you can pass any number of groups and you can render them as you want. Let take example of above code and render options.

Customizing Component

VxAutoSuggest component is now more flexible and it lets you render your suggestion however you want. It also completely decoupled from our layout. So you can also use it in other areas of your app.
vxAutoSuggest component provides dynamic scoped slots for flexibility. All you have to is define template for each group as shown in above example. For more information please check src/layouts/components/navbar/component/SearchBar.vue
Here’s some feature at glance:

  • You can enable showing pinned items using initialData prop. Check src/layouts/components/navbar/component/Bookmarks.vue
  • hideGroupTitle prop let you hide group title block. This is helpful when you just have one group for filtering.
  • You can also add classes directly to input of vx-auto-suggest using inputClassses prop, if you want more control over input of this component.
  • You can also add auto focus when search input is rendered using autoFocus prop.

  • Add search limit to suggestions. Maximum value of search limit is 4. You can use searchLimit prop to change it.

    Dependencies

  • Feather Icon (Font icon version)

    API

    | Name | Type | Parameters | Description | default | | —- | —- | —- | —- | —- | | placeholder | String | | Placeholder for input | search.. | | data | Object | | Object from which component will render data | | | initialData | Boolean | true, false | render data when nothing is searched. Useful for pinned items | false | | inputClasses | String, Object, Array | | Add classes to search input | | | autoFocus | Boolean | true, false | Should input get auto focus when component is rendered | false | | hideGroupTitle | Boolean | true, false | hide group title in suggestion list | false | | searchLimit | Number | | Limit the number of suggestions shown in suggestion list | 4(Max) |