프롬프트/자동 보완을 위한 구성 요소

개시하다

Vue.js에서 대형 검색엔진과 같은 입력 구성 요소를 만들었습니다.npm에서 공개되니까 가능하면 사용하세요.

무슨 기능

텍스트 상자에 문자를 입력하면 Vue는 나머지 후보를 표시하는 프롬프트(자동 완성)를 제공합니다.js의 텍스트 상자 구성 요소입니다.검색엔진 사이트에서 그걸 자주 볼 수 있어요.
다음 GIF 애니메이션을 보면 어떤 구성 부분인지 단번에 알 수 있다.

간단한 샘플

어쨌든 샘플 코드입니다.요약 목록에 data() 지정한 그룹의 간단한 견본을 표시합니다.

<template>
  <div style="width:400px">
    <vue-suggest-input v-model="selected" :items="items"/>
  </div>
</template>
<script>
import VueSuggestInput from 'vue-suggest-input'
import 'vue-suggest-input/dist/vue-suggest-input.css'

export default {
  components: {
    VueSuggestInput
  },
  data() {
    return {
      items: ['apple','cocoa','coffee','cola'],
      selected: "",
    }
  }
}
</script>

실제 운용에서 REST API 등 외부 로드 프롬프트 목록에 표시되는 내용은 뒤에 설명됩니다.

설치하다.

npm로 설치 가능합니다.

npm i vue-suggest-input --save

키보드 단축키

단축키를 사용하여 프롬프트 목록을 표시하거나 목록에서 이동하거나 선택할 수 있습니다.

프롬프트 목록 숨기기

Key
설명
위쪽(↑), 아래쪽(↓)
프롬프트 목록 표시
Entersearch 사건이 발생하다.

프롬프트 목록을 표시할 때

Key
설명
Escape(ESC)
프롬프트 목록을 닫습니다.
위쪽 화살표(↑)
후보의 선택을 위로 이동합니다.
아래쪽 화살표(↓)
후보의 선택을 아래로 이동합니다.
Enter
권장 목록에서 선택한 후보를 입력 영역으로 설정하고 search 이벤트가 발생합니다.

특성(Proops)

items

유형: Arayor Function or Promise
기본값: null

개요

프롬프트에 표시할 문자열(String)의 배열을 지정합니다.배열, 함수 또는 Promise의 유형을 지정합니다.함수 또는 Promise가 지정하는 경우 함수의 반환 값은 배열이어야 합니다.

스토리지 지정 시 예제

<vue-suggest-input :items="['item1', 'item2']"/>

Promise 지정 예제

template

<vue-suggest-input :items="getItems"/>

javascript

export  default {
  methods: {
    async getItems() {
      const { data } = await this.$axios.get("url")    
      return data
    }
  }
}

filter-func

유형:Function
기본값: null

개요

알림 내용을 필터할 사용자 정의 함수를 지정할 수 있습니다.두 개의 매개 변수를 사용자 정의 함수에 전달합니다.매개 변수의 첫 번째는 힌트의 내용을 선별하고, 두 번째는 입력 영역의 내용을 선별한다.
사용자 정의 함수는 bool 형식의 반환 값을 되돌려야 합니다.true가 반환되면 첫 번째 매개변수의 프롬프트가 후보로 표시됩니다.반환false시 표시되지 않습니다.
다음 샘플 코드는 제안 11 문자열만 표시됩니다.
template

<vue-suggest-input 
  :item="['item011', 'item012', 'item111']"
  :filter-func="myFilter"/>

javascript

export  default {
  methods: {
    myFilter(suggestItem, inputValue) {
      return suggestItem.indexOf("11") >= 0
    }
  }
}

max-suggest

유형: Number
기본값: 10

개요

표시할 최대 프롬프트 수를 지정합니다.
template

<vue-suggest-input :max-suggest="5"/>

query-interval

유형: Number
기본값: 100

개요

다시 찾기 프롬프트 목록의 간격을 밀리초 단위로 설정합니다.예를 들어 1000를 지정할 때 1초의 느낌items으로 속성에서 지정한 수조나 함수에서 알림을 검색합니다.
반대로 입력할 때마다 조언을 즉시 검색하고 싶을 때 지정0.
template

<vue-suggest-input :query-interval="1000"/>

loading-show-delay

유형: Number
기본값: 500

개요

검색 프롬프트에서 읽기 중...이 표시될 때까지 밀리초 단위로 시간을 지정합니다.예를 들어, 500를 지정할 때 프롬프트를 검색하는 데 500ms 이상이 소요될 경우 입력 표시줄 아래에 읽기 중...이 표시됩니다.
이것은 검색 알림에 시간이 걸리는 유용한 속성입니다.

이벤트

search

프롬프트 목록에서 후보를 선택하거나 Enter 키를 사용하여 입력을 결정할 때 발생하는 이벤트입니다.이 구성 요소에 입력된 검색 조건을 바탕으로 주요 검색 처리를 하는 데 주로 사용됩니다.
template

<vue-suggest-input @search="doSearch()"/>

input

입력할 때마다 발생하는 이벤트입니다.이는 HTMLElement의inpput사건에 해당한다.
template

<vue-suggest-input @input="doInput()"/>

사용자 지정 아이콘

입력 영역의 오른쪽에 있는 아이콘을 자신의 아이콘 등으로 바꿀 수 있습니다.기본적으로 아래 그림과 같이 돋보기 SVG 아이콘이 표시됩니다.
아이콘 사용자 정의, slot을 사용하십시오.다음은 샘플 코드입니다. 아이콘의 견본을 slot으로 바꾸기 <vue-suggest-input> <div slot="add-on-icon"> <i class="fa fa-rocket" aria-hidden="true"></i> </div> </vue-suggest-input> 위 코드의 경우, 아이콘은 slot이 지정한 이미지를 대체합니다. 아래와 같습니다. 요약 항목 사용자 정의 default 슬롯에 사용자 정의 HTML을 설정하면 프롬프트 항목의 디자인을 사용자 정의할 수 있습니다. <vue-suggest-input> <template slot-scope="{text}"> <div> <i class="fa fa-code" aria-hidden="true"></i> <span>{{text}}</span> </div> </template> </vue-suggest-input> [실행 결과] 최후 만약 잘못이 있다면, 평론으로 나에게 알려줄 수 있다면 나는 매우 기쁠 것이다.