SearchBox

Demos

Stylistic variants

Available stylistic values for the ui prop: strong.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-search-box/>
  <veui-search-box ui="strong"/>
</article>
</template>

<script>
import { SearchBox } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  }
}
</script>

<style lang="less" scoped>
.veui-search-box {
  margin-right: 1em;
}
</style>

Size variants

Available size values for the ui prop: xs / s / m / l.

Edit this demo on GitHubEdit
<template>
<article>
  <div class="container">
    <veui-search-box ui="strong xs"/>
  </div>
  <div class="container">
    <veui-search-box ui="strong s"/>
  </div>
  <div class="container">
    <veui-search-box ui="strong"/>
  </div>
  <div class="container">
    <veui-search-box ui="strong l"/>
  </div>
  <div class="container">
    <veui-search-box ui="xs"/>
    <veui-search-box ui="s"/>
  </div>
  <div class="container">
    <veui-search-box/>
    <veui-search-box ui="l"/>
  </div>
</article>
</template>

<script>
import { SearchBox } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  }
}
</script>

<style lang="less" scoped>
.container {
  margin-bottom: 1em;
  .veui-search-box {
    margin-right: 1em;
  }
}
</style>

Read-only and disabled

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-radio-group
      v-model="state"
      :items="states"
    />
  </section>
  <section>
    <veui-search-box
      :readonly="isReadonly"
      :disabled="isDisabled"
    />
    <veui-search-box
      :readonly="isReadonly"
      :disabled="isDisabled"
      ui="strong"
    />
  </section>
</article>
</template>

<script>
import { SearchBox, RadioGroup } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      state: null,
      states: [
        {
          label: 'Normal',
          value: null
        },
        {
          label: 'Read-only',
          value: 'readonly'
        },
        {
          label: 'Disabled',
          value: 'disabled'
        }
      ]
    }
  },
  computed: {
    isReadonly () {
      return this.state === 'readonly'
    },
    isDisabled () {
      return this.state === 'disabled'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-search-box {
  margin-right: 1em;
}
</style>

Suggestion list

Edit this demo on GitHubEdit
<template>
<article>
  <veui-search-box
    v-model="value"
    clearable
    :suggestions="suggestions"
    replace-on-select
    @select="handleSelect"
  />
  <veui-search-box
    v-model="value1"
    ui="strong"
    clearable
    :suggestions="suggestions1"
    replace-on-select
    @select="handleSelect"
  />
</article>
</template>

<script>
import { SearchBox, toast } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  },
  data () {
    return {
      value: '',
      value1: '',
      browsers: [
        'Google Chrome',
        'Apple Safari',
        'Microsoft Edge',
        'Mozilla Firefox',
        'Opera',
        'Vivaldi',
        'Internet Explorer',
        'Maxthon',
        'Android Browser',
        'UC Browser',
        'Samsung Internet',
        'QQ Browser'
      ]
    }
  },
  computed: {
    suggestions () {
      if (!this.value) {
        return []
      }
      return this.browsers.filter(browser => {
        return browser.toLowerCase().indexOf(this.value.toLowerCase()) !== -1
      })
    },
    suggestions1 () {
      if (!this.value1) {
        return []
      }
      return this.browsers.filter(browser => {
        return browser.toLowerCase().indexOf(this.value1.toLowerCase()) !== -1
      })
    }
  },
  methods: {
    handleSelect ({ value }) {
      toast.info(value)
    }
  }
}
</script>

<style lang="less" scoped>
.veui-search-box {
  margin-left: 1em;
}
</style>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
strongStrong style.
xsExtra small.
sSmall.
mMedium.
lLarge.
xlExtra large.
valuestring-

v-model

The value of the search box.

disabledboolean=falseWhether the search box is disabled.
readonlyboolean=falseWhether the search box is read-only.
placeholderstring-The placeholder text of the search box.
autofocusbooleanfalseWhether the search box gains focus automatically.
clearablebooleanfalseWhether the clear button is displayed.
select-on-focusbooleanfalseWhether to select all content upon focus.
compositionbooleanfalseWhether the search box triggers value change upon composition of IME.
suggestionsArray<string>|Array<Object>-

The suggestion list. When the item type is Object, the properties will be {label, value}.

NameTypeDescription
labelstringThe text of the suggestion option.
valuestringThe value of the suggestion option.
replace-on-selectbooleantrueWhether to replace the content with suggestion item value when it's selected.
maxlengthnumber=-The maximum length of characters that can be entered.
get-lengthfunction(string): number=-Used to customize length calculation of the input.
strictboolean=falseWhether to disallow further input after reaching the maximum character length.
trimboolean | string=false

Wether to trim the input value. If set to true, the input value will be trimmed from both ends. If set to false, the input value will not be trimmed. If set to a string, the input value will be trimmed from the specified side.

ValueDescription
bothTrim from both ends. Equivalent to true.
startTrim from the start.
endTrim from the end.

Slots

NameDescription
suggestions

The content of the entire suggestion list.

NameTypeDescription
suggestionsArray<{value: string, label: string}>The normalized suggestions from the suggestions prop.
selectfunction(suggestion: {value: string, label: string}): voidSelect the specified suggestion.
suggestions-beforeThe content before the suggestion list.
suggestions-afterThe content after the suggestion list.
suggestion

The content of each suggestion option.

NameTypeDescription
labelstringThe text label of the suggestion option.
valuestringThe value of the suggestion option.

Additionally, custom properties apart from the listed ones will also be passes into the slot props object via v-bind.

When suggestions is an Array<string>, the label and value of the suggestion option will share the same string value.

suggest-triggerArray<string>|stringinput

Specifies when the suggestion list is displayed. Can be either an event name or a list of event names.

ValueDescription
focusWhen the search box is focused.
inputWhen the input triggers input event.
submitWhen the submit button is activated.
expandedboolean=false

.sync

Whether the suggestion list is expanded (if there are no items in suggestions, the list won't be expanded even the value is false).

match(item, keyword, { ancestors }) => boolean | Array<[number, number]>-Used to customize search highlighting logic. See Autocomplete.
filter(item, keyword, { ancestors, offsets }) => boolean-Used to customize search hitting logic. See Autocomplete.

Events

NameDescription
input

Triggers when the input value changes. The callback parameter list is (value: string).

NameTypeDescription
valuestringThe value of the input.
suggest

Triggers when the suggestion list is displayed. The callback parameter list is (value: string).

NameTypeDescription
valuestringThe value of the input.
select

Triggered when an suggestion option is selected. The callback parameter list is (item: Object).

NameTypeDescription
item{label: string, value: string=, ...}The suggestion option.
search

Triggered when the input value is submitted. The callback parameter list is (value: string, event: Event).

NameTypeDescription
valuestringThe value of the input.
eventEventThe native click event object.
toggleTriggered when the expanded state is going to change. The callback parameter list is (expanded: boolean). expanded denotes whether the suggestion list is to be expanded or collapsed.

Icons

NameDescription
searchSearch.
Edit this page on GitHubEdit