Autocomplete

Extended input that provide suggestions while the user types

---

edit on github

Examples

Base

<template>
  <section>
    <p class="content"><b>Selected:</b> {{ selected }}</p>
    <o-field label="Find a JS framework">
      <o-autocomplete rounded expanded v-model="name" :data="filteredDataArray" placeholder="e.g. jQuery" icon="search" clearable @select="option => selected = option">
        <template slot="empty">No results found</template>
      </o-autocomplete>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        data: ['Angular', 'Angular 2', 'Aurelia', 'Backbone', 'Ember', 'jQuery', 'Meteor', 'Node.js', 'Polymer', 'React', 'RxJS', 'Vue.js'],
        name: '',
        selected: null
      }
    },
    computed: {
      filteredDataArray() {
        return this.data.filter(option => {
          return (
            option
              .toString()
              .toLowerCase()
              .indexOf(this.name.toLowerCase()) >= 0
          )
        })
      }
    }
  }
</script>

Object array

<template>
  <section>
    <o-field grouped group-multiline>
      <o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
      <o-switch v-model="keepFirst">Keep-first</o-switch>
    </o-field>
    <p class="content"><b>Selected:</b> {{ selected }}</p>
    <o-field label="Find a name">
      <o-autocomplete
        v-model="name"
        placeholder="e.g. Anne"
        :keep-first="keepFirst"
        :open-on-focus="openOnFocus"
        :data="filteredDataObj"
        field="user.first_name"
        @select="option => selected = option"
      >
      </o-autocomplete>
    </o-field>
  </section>
</template>

<script>
  const data = [
    { id: 1, user: { first_name: 'Jesse', last_name: 'Simmons' }, date: '2016/10/15 13:43:27', gender: 'Male' },
    { id: 2, user: { first_name: 'John', last_name: 'Jacobs' }, date: '2016/12/15 06:00:53', gender: 'Male' },
    { id: 3, user: { first_name: 'Tina', last_name: 'Gilbert' }, date: '2016/04/26 06:26:28', gender: 'Female' },
    { id: 4, user: { first_name: 'Clarence', last_name: 'Flores' }, date: '2016/04/10 10:28:46', gender: 'Male' },
    { id: 5, user: { first_name: 'Anne', last_name: 'Lee' }, date: '2016/12/06 14:38:38', gender: 'Female' },
    { id: 6, user: { first_name: 'Sara', last_name: 'Armstrong' }, date: '2016/09/23 18:50:04', gender: 'Female' },
    { id: 7, user: { first_name: 'Anthony', last_name: 'Webb' }, date: '2016/08/30 23:49:38', gender: 'Male' },
    { id: 8, user: { first_name: 'Andrew', last_name: 'Greene' }, date: '2016/11/20 14:57:47', gender: 'Male' },
    { id: 9, user: { first_name: 'Russell', last_name: 'White' }, date: '2016/07/13 09:29:49', gender: 'Male' },
    { id: 10, user: { first_name: 'Lori', last_name: 'Hunter' }, date: '2016/12/09 01:44:05', gender: 'Female' },
    { id: 11, user: { first_name: 'Ronald', last_name: 'Wood' }, date: '2016/12/04 02:23:48', gender: 'Male' },
    { id: 12, user: { first_name: 'Michael', last_name: 'Harper' }, date: '2016/07/27 13:28:15', gender: 'Male' },
    { id: 13, user: { first_name: 'George', last_name: 'Dunn' }, date: '2017/03/07 12:26:52', gender: 'Male' },
    { id: 14, user: { first_name: 'Eric', last_name: 'Rogers' }, date: '2016/06/07 05:41:52', gender: 'Male' },
    { id: 15, user: { first_name: 'Juan', last_name: 'Meyer' }, date: '2017/02/01 04:56:34', gender: 'Male' },
    { id: 16, user: { first_name: 'Silvia', last_name: 'Rosa' }, date: '2017/01/26 11:50:04', gender: 'Female' },
    { id: 17, user: { first_name: 'Lori', last_name: 'Cunningham' }, date: '2016/05/01 10:00:56', gender: 'Female' },
    { id: 18, user: { first_name: 'Charles', last_name: 'Graham' }, date: '2016/05/31 06:43:30', gender: 'Male' },
    { id: 19, user: { first_name: 'Henry', last_name: 'Morrison' }, date: '2016/09/27 16:15:44', gender: 'Male' },
    { id: 20, user: { first_name: 'Albert', last_name: 'Mendoza' }, date: '2016/08/08 05:29:24', gender: 'Male' },
    { id: 21, user: { first_name: 'Ruby', last_name: 'Snyder' }, date: '2017/04/01 12:04:39', gender: 'Female' },
    { id: 22, user: { first_name: 'Jesse', last_name: 'Warren' }, date: '2016/08/20 01:36:38', gender: 'Male' },
    { id: 23, user: { first_name: 'Carlos', last_name: 'Ferguson' }, date: '2016/05/31 10:40:29', gender: 'Male' },
    { id: 24, user: { first_name: 'Melissa', last_name: 'Peters' }, date: '2016/07/23 00:41:54', gender: 'Female' },
    { id: 25, user: { first_name: 'Arthur', last_name: 'Garza' }, date: '2017/03/11 14:11:37', gender: 'Male' },
    { id: 26, user: { first_name: 'Joe', last_name: 'Berry' }, date: '2016/07/09 15:16:56', gender: 'Male' },
    { id: 27, user: { first_name: 'Joseph', last_name: 'Bishop' }, date: '2016/10/04 19:44:54', gender: 'Male' },
    { id: 28, user: { first_name: 'Sarah', last_name: 'Harper' }, date: '2016/09/23 05:09:11', gender: 'Female' },
    { id: 29, user: { first_name: 'Christopher', last_name: 'Fuller' }, date: '2016/04/12 00:05:35', gender: 'Male' },
    { id: 30, user: { first_name: 'Alan', last_name: 'Mendoza' }, date: '2016/04/22 10:48:02', gender: 'Male' },
    { id: 31, user: { first_name: 'James', last_name: 'Davis' }, date: '2017/01/16 15:17:03', gender: 'Male' },
    { id: 32, user: { first_name: 'Scott', last_name: 'Welch' }, date: '2016/10/04 23:31:51', gender: 'Male' },
    { id: 33, user: { first_name: 'Mildred', last_name: 'Myers' }, date: '2016/11/23 13:46:18', gender: 'Female' },
    { id: 34, user: { first_name: 'Victor', last_name: 'Martinez' }, date: '2016/04/06 17:05:07', gender: 'Male' },
    { id: 35, user: { first_name: 'Susan', last_name: 'Medina' }, date: '2016/12/09 10:33:37', gender: 'Female' },
    { id: 36, user: { first_name: 'Judy', last_name: 'Long' }, date: '2016/07/26 16:19:04', gender: 'Female' },
    { id: 37, user: { first_name: 'Joan', last_name: 'Myers' }, date: '2016/09/22 04:55:54', gender: 'Female' },
    { id: 38, user: { first_name: 'Rachel', last_name: 'Gonzales' }, date: '2016/07/15 13:56:38', gender: 'Female' },
    { id: 39, user: { first_name: 'Roger', last_name: 'Hunt' }, date: '2016/08/14 10:43:11', gender: 'Male' },
    { id: 40, user: { first_name: 'Dorothy', last_name: 'Howard' }, date: '2016/06/19 05:34:49', gender: 'Female' },
    { id: 41, user: { first_name: 'Eugene', last_name: 'Lynch' }, date: '2016/12/24 08:19:24', gender: 'Male' },
    { id: 42, user: { first_name: 'Kathy', last_name: 'Webb' }, date: '2017/04/01 21:09:05', gender: 'Female' },
    { id: 43, user: { first_name: 'Antonio', last_name: 'White' }, date: '2017/02/10 06:51:20', gender: 'Male' },
    { id: 44, user: { first_name: 'Louis', last_name: 'Spencer' }, date: '2016/10/08 02:20:22', gender: 'Male' },
    { id: 45, user: { first_name: 'Andrea', last_name: 'Marshall' }, date: '2016/09/04 10:59:57', gender: 'Female' },
    { id: 46, user: { first_name: 'Eugene', last_name: 'Sims' }, date: '2017/03/15 06:39:48', gender: 'Male' },
    { id: 47, user: { first_name: 'Mildred', last_name: 'Gibson' }, date: '2016/04/18 06:43:54', gender: 'Female' },
    { id: 48, user: { first_name: 'Joan', last_name: 'Arnold' }, date: '2016/12/16 04:52:23', gender: 'Female' },
    { id: 49, user: { first_name: 'Jesse', last_name: 'Schmidt' }, date: '2016/06/11 02:44:33', gender: 'Male' },
    { id: 50, user: { first_name: 'David', last_name: 'Frazier' }, date: '2017/02/15 21:46:30', gender: 'Male' },
    { id: 51, user: { first_name: 'Nicholas', last_name: 'Howell' }, date: '2016/11/01 15:08:31', gender: 'Male' },
    { id: 52, user: { first_name: 'Douglas', last_name: 'Chapman' }, date: '2017/02/08 03:33:24', gender: 'Male' },
    { id: 53, user: { first_name: 'Bruce', last_name: 'Simmons' }, date: '2016/07/14 12:11:17', gender: 'Male' },
    { id: 54, user: { first_name: 'Antonio', last_name: 'George' }, date: '2016/11/07 19:12:55', gender: 'Male' },
    { id: 55, user: { first_name: 'Chris', last_name: 'Marshall' }, date: '2016/07/03 12:11:45', gender: 'Male' },
    { id: 56, user: { first_name: 'Ashley', last_name: 'Hudson' }, date: '2016/10/14 21:08:05', gender: 'Female' },
    { id: 57, user: { first_name: 'Alan', last_name: 'Edwards' }, date: '2017/03/22 21:10:25', gender: 'Male' },
    { id: 58, user: { first_name: 'George', last_name: 'Clark' }, date: '2016/04/28 03:15:05', gender: 'Male' },
    { id: 59, user: { first_name: 'Frank', last_name: 'Porter' }, date: '2016/09/08 00:48:14', gender: 'Male' },
    { id: 60, user: { first_name: 'Christopher', last_name: 'Palmer' }, date: '2016/05/24 08:58:12', gender: 'Male' }
  ]

  export default {
    data() {
      return {
        data,
        keepFirst: false,
        openOnFocus: false,
        name: '',
        selected: null
      }
    },
    computed: {
      filteredDataObj() {
        return this.data.filter(option => {
          return (
            option.user.first_name
              .toString()
              .toLowerCase()
              .indexOf(this.name.toLowerCase()) >= 0
          )
        })
      }
    }
  }
</script>

Groups

<template>
  <section>
    <p class="content"><b>Selected:</b> {{ selected }}</p>
    <o-field label="Find a food">
      <o-autocomplete v-model="name" group-field="type" group-options="items" open-on-focus :data="filteredDataObj" field="user.first_name" @select="option => (selected = option)">
      </o-autocomplete>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            type: 'Fruit',
            items: ['Apple', 'Banana', 'Watermelon']
          },
          {
            type: 'Vegetables',
            items: ['Carrot', 'Broccoli', 'Cucumber', 'Onion']
          }
        ],
        name: '',
        selected: null
      }
    },
    computed: {
      filteredDataObj() {
        const newData = []
        this.data.forEach(element => {
          const items = element.items.filter(item => item.toLowerCase().indexOf(this.name.toLowerCase()) >= 0)
          if (items.length) {
            newData.push({ type: element.type, items })
          }
        })
        return newData
      }
    }
  }
</script>
98

Infinite Scroll

<template>
  <section>
    <p class="content"><b>Selected:</b> {{ selected }}</p>
    <o-field label="Find a movie">
      <o-autocomplete
        :data="data"
        placeholder="e.g. Fight Club"
        field="title"
        :loading="isFetching"
        check-infinite-scroll
        :debounce-typing="500"
        @typing="getAsyncData"
        @select="option => selected = option"
        @infinite-scroll="getMoreAsyncData"
      >
        <template slot-scope="props">
          <div class="media">
            <div class="media-left">
              <img width="32" :src="`https://image.tmdb.org/t/p/w500/${props.option.poster_path}`" />
            </div>
            <div class="media-content">
              {{ props.option.title }}
              <br />
              <small> Released at {{ props.option.release_date }}, rated <b>{{ props.option.vote_average }}</b> </small>
            </div>
          </div>
        </template>
        <template slot="footer">
          <span v-show="page > totalPages" class="has-text-grey"> Thats it! No more movies found. </span>
        </template>
      </o-autocomplete>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        data: [],
        selected: null,
        isFetching: false,
        name: '',
        page: 1,
        totalPages: 1
      }
    },
    methods: {
      getAsyncData(name) {
        // String update
        if (this.name !== name) {
          this.name = name
          this.data = []
          this.page = 1
          this.totalPages = 1
        }
        // String cleared
        if (!name.length) {
          this.data = []
          this.page = 1
          this.totalPages = 1
          return
        }
        // Reached last page
        if (this.page > this.totalPages) {
          return
        }
        this.isFetching = true
        fetch(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}&page=${this.page}`)
          .then(response => response.json())
          .then(data => {
            data.results.forEach(item => this.data.push(item))

            this.page++
            this.totalPages = data.total_pages
          })
          .catch(error => {
            throw error
          })
          .finally(() => {
            this.isFetching = false
          })
      },
      getMoreAsyncData() {
        this.getAsyncData(this.name)
      }
    }
  }
</script>

Class props

📄 Full scss file

Header slot (optional)

Frameworks

Vue.js

Footer slot (optional)

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
expandedClass	Class of the autocomplete menu expanded.	expanded
inputClasses	Classes to apply on internal input. More detail here
itemClass	Class of the menu items.
itemEmptyClass	Class of the menu empty placeholder item.
itemFooterClass	Class of the menu footer item.
itemGroupTitleClass	Class of the menu items group title.
itemHeaderClass	Class of the menu header item.
itemHoverClass	Class of the menu items on hover.
menuClass	Class of the autocomplete menu.
menuPositionClass	Class of the autocomplete menu position.	menu-position	auto top bottom
rootClass	Class of the root element.

Props

Prop name	Description	Type	Values	Default
animation	Transition name to apply on dropdown list	string	-	From config autocomplete: {   animation: 'fade' }
appendToBody	Append autocomplete content to body	boolean	-
autocomplete	Native options to use in HTML5 validation	string	-
checkInfiniteScroll	Makes the component check if list reached scroll end and emit infinite-scroll event.	boolean	-
clearOnSelect	Clear input text on select	boolean	-
clearable	Add a button/icon to clear the inputed text	boolean	-
confirmKeys	Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter)	array	-	['Tab', 'Enter']
customFormatter	Function to format an option to a string for display in the input as alternative to field prop)	func	-
data	Options / suggestions	array	-	[]
debounceTyping	Number of milliseconds to delay before to emit typing event	number	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-
field	Property of the object (if data is array of objects) to use as display text, and to keep track of selected option	string	-	'value'
groupField	Property of the object (if data is array of objects) to use as display text of group	string	-
groupOptions	Property of the object (if data is array of objects) to use as key to get items array of each group, optional	string	-
icon	Icon name to be added	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack
iconRight	Icon name to be added on the right side	string	-
iconRightClickable	Clickable icon right if exists	boolean	-
itemTag	Menu item tag name	string	-	From config autocomplete: {   itemTag: 'div' }
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-
keepOpen	Keep open dropdown list after select	boolean	-
maxHeight	Max height of dropdown content	string|number	-
maxlength	Same as native maxlength, plus character counter	number|string	-
menuPosition	Position of dropdown	string	auto, top, bottom	'auto'
menuTag	Menu tag name	string	-	From config autocomplete: {   menuTag: 'div' }
openOnFocus	Open dropdown list on focus	boolean	-
override	Override classes	boolean	-	false
rounded	Makes the element rounded	boolean	-
selectOnClickOutside	Trigger the select event for the first pre-selected option when clicking outside and keep-first is enabled	boolean	-
selectableFooter	Allows the footer in the autocomplete to be selectable	boolean	-
selectableHeader	Allows the header in the autocomplete to be selectable	boolean	-
size	Vertical size of input, optional	string	small, medium, large
statusIcon	Show status icon using field and variant prop	boolean	-	From config {    "statusIcon": true }
type	Input type	string	-	'text'
useHtml5Validation	Enable html 5 native validation	boolean	-	From config {    "useHtml5Validation": true }
v-model		number|string	-
validationMessage	The message which is shown when a validation error occurs	string	-

Events

Event name	Properties	Description
icon-click
blur
focus
input
select	selected Object - selected option event Event - native event
select-header
select-footer
infinite-scroll
typing
icon-right-click

Slots

Name	Description	Bindings
header
group
default
empty
footer

Style

CSS Variable	SASS Variable	Default
--oruga-autocomplete-item-color	$autocomplete-item-color	#000000
--oruga-autocomplete-item-disabled-opacity	$autocomplete-item-disabled-opacity	$base-disabled-opacity
--oruga-autocomplete-item-font-size	$autocomplete-item-font-size	$base-font-size
--oruga-autocomplete-item-hover-background-color	$autocomplete-item-hover-background-color	#f5f5f5
--oruga-autocomplete-item-hover-color	$autocomplete-item-hover-color	#000000
--oruga-autocomplete-item-line-height	$autocomplete-item-line-height	$base-line-height
--oruga-autocomplete-item-padding	$autocomplete-item-padding	.375rem 1rem
--oruga-autocomplete-menu-background	$autocomplete-menu-background	#ffffff
--oruga-autocomplete-menu-border-radius	$autocomplete-menu-border-radius	$base-border-radius
--oruga-autocomplete-menu-box-shadow	$autocomplete-menu-box-shadow	0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02)
--oruga-autocomplete-menu-margin	$autocomplete-menu-margin	0
--oruga-autocomplete-menu-max-height	$autocomplete-menu-max-height	200px
--oruga-autocomplete-menu-padding	$autocomplete-menu-padding	.5rem 0 .5rem 0
--oruga-autocomplete-menu-zindex	$autocomplete-menu-zindex	20