<template>
  <div class="demo-auto-complete-custom-filter">
    <ui-auto-complete
      v-model="value"
      :options="data"
      :filter-method="filterHandler">
      <div
        slot="option"
        slot-scope="props">
        {{ props.label }}
      </div>
    </ui-auto-complete>
  </div>
</template>
<script>
import { AutoComplete } from "amumu-ui"
import { encode } from "amumu-ui/src/utils/reg"

const DATA = [
  {
    value: "",
    label: "ALL",
  },
  {
    value: "1",
    label: "FIRST",
  },
  {
    value: "2",
    label: "SECOND",
  },
  {
    value: "3",
    label: "THIRD",
  },
  {
    value: "4",
    label: "FOURTH",
  },
  {
    value: "5",
    label: "FIFTH",
  },
  {
    value: "6",
    label: "SIXTH",
  },
]

export default {
  components: {
    "ui-auto-complete": AutoComplete,
  },
  data() {
    return {
      data: DATA,
      value: "",
    }
  },
  methods: {
    filterHandler(option, val) {
      return new RegExp(`^${encode(val)}$`, "i").test(option.label)
    },
  },
}
</script>
