ElementUI は住所の自動補完テキスト ボックスを実装します

COVID-19 自己検出システムの Web デザインおよび開発ドキュメント

Vue.js をベースにした Sylvan Ding の最初のプロジェクト。このプロジェクトで提供される情報は参照のみを目的としており、情報の正確性、有効性、適時性、完全性は保証されません。詳細については、国家衛生健康委員会委員会を参照してください。 Webサイト！
ドキュメントを参照する »

デモを表示する·バグを報告する·機能をリクエストする

ElementUI は住所の自動補完テキスト ボックスを実装します

lbs.amapのel-autocompleteコンポーネントとAPIを使用します。これは、Query Autocomplete サービスの実現に役立ちます。クエリ オートコンプリートを使用すると、入力時に推奨クエリを返すことにより、テキスト ベースの地理検索のクエリ予測を提供できます。このサービスは 1 日あたり 5,000 回までしか利用できないことに注意してください。サービスが制限に達した場合、または API サーバーに問題が発生した場合に設定します。inputTipsinputTipsOpen = false

開発環境

ノード	14.16.1
npm	8.18.0
ビュー-cli	2.9.6
ビュー	2.5.2

解決

<template>
  <el-autocomplete
    v-model="place"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入地址(省/市/地/县)"
    :trigger-on-focus="false"
    :clearable="true"
    prefix-icon="el-icon-place"
  ></el-autocomplete>
</template>

<script>
import request from '@/utils/request'
import { errorMsg, infoMsg } from '@/utils/msgsettings.js'
export default {
  data() {
    return {
      place: '',
      addresses: [],
      timeout: null,
      inputTipsOpen: true,
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      this.addresses.splice(0, this.addresses.length)
      this.inputTips(queryString)
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(this.addresses)
      }, 600)
    },
    inputTips(queryString) {
      // ! frequency limit: 5,000 times per day
      // https://lbs.amap.com/api/webservice/guide/api/inputtips
      request
        .request({
          url: '/inputtips',
          baseURL: 'https://restapi.amap.com/v3/assistant/',
          params: {
            keywords: queryString,
            datatype: 'poi',
            key: 'fdfb60635a50****298be7dc28',
          },
        })
        .then((response) => {
          var { status, info, tips } = response.data
          if (status === '1') {
            this.addresses = tips.map((value) => {
              // {value, id, name, district, adcode, location, address}
              return {
                value: `${value.district}${value.name}`,
                ...value,
              }
            })
          } else {
            if (this.inputTipsOpen) {
              errorMsg(info)
              this.inputTipsOpen = false
            }
          }
        })
        .catch(() => {})
    },
  },
}
</script>

転載の際は出典を明記してください: ©️ Sylvan Ding 2022