element-plus 使用 autocomplete组件从服务端搜索数据实现输入建议项0-9A-Za-z的排序

要使用 element-plus 的 autocomplete 组件从服务端搜索数据实现输入建议项 0-9A-Za-z 的排序，你需要在后端实现对输入关键字的搜索，并按照要求进行排序，然后将结果以 JSON 数组的形式返回给前端。

在前端，你需要使用 element-plus 的 autocomplete 组件，并设置 `:fetch-suggestions` 属性为一个异步函数，该函数接收一个字符串参数 `query`，表示用户输入的关键字，然后使用 axios 或者其他 HTTP 库向后端发送 GET 请求，获取搜索结果。你需要在请求中包含一个名为 `q` 的查询参数，表示用户输入的关键字，后端根据这个关键字进行搜索并返回结果。

在获取到搜索结果后，你需要对结果进行排序，按照 0-9A-Za-z 的顺序进行排序，然后将排序后的结果以数组形式返回给 autocomplete 组件。你可以在异步函数中使用 `Promise` 对象来返回结果。例如：

<template>
  <el-autocomplete
    v-model="value"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入关键字"
  ></el-autocomplete>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      value: '',
      suggestions: []
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      axios.get('/api/search', {
        params: { q: queryString }
      }).then(response => {
        const results = response.data
        // 对搜索结果进行排序
        results.sort((a, b) => {
          const aIndex = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.indexOf(a.charAt(0))
          const bIndex = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.indexOf(b.charAt(0))
          return aIndex - bIndex
        })
        this.suggestions = results
        cb(this.suggestions)
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

在上面的例子中，`querySearchAsync` 是一个异步函数，它接收一个字符串参数 `queryString` 和一个回调函数 `cb`，这个回调函数用来返回搜索结果给 autocomplete 组件。在函数中，我们使用 axios 发送 GET 请求，获取搜索结果。然后对结果进行排序，并将排序后的结果赋值给 `this.suggestions` 变量，最后调用回调函数 `cb` 将结果返回给 autocomplete 组件。