**

模糊匹配提示下拉

**

实现步骤

  1. 前端输入框改进：

    • 使用带有自动完成功能的输入框组件（例如 el-autocomplete），以便在用户输入时显示建议列表。
    • 当用户输入 1 到 4位数字时，触发模糊查询建议。

  2. 后端 API 支持：

    • 创建一个 API 端点，用于根据输入的尾号查询数据库中的箱号。
    • 该端点应接受输入的尾号，并返回匹配的数据列表。

  3. 数据库查询优化：

    • 从 数据 表中预先读取所有市区，并在内存中进行匹配，以提高性能。
    • 当用户选择具体市区时，使用精确查询；否则，使用模糊查询。

示例代码

前端代码

<template>
  <el-autocomplete
    v-model="inputNameNumber"
    :fetch-suggestions="querySearch"
    placeholder="Please Enter Container name"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputname: '',
      nameSuggestions: []
    };
  },
  methods: {
    querySearch(queryString, cb) {
      if (queryString.length >= 1 && queryString.length <= 4) {
        // 调用后端 API 获取建议列表
        this.fetchnameSuggestions(queryString).then(suggestions => {
          cb(suggestions);
        });
      } else {
        cb([]);
      }
    },
    handleSelect(item) {
      // 用户选择具体时的处理逻辑
      this.inputnamer = item.value;
      // 执行精确查询
      this.performExactQuery(item.value);
    },
    async fetchNameSuggestions(queryString) {
      try {
        const response = await fetch(`/api/name/suggestions?tail=${queryString}`);
        const data = await response.json();
        this.nameSuggestions = data.map(container => ({ value: table }));
        return this.nameSuggestions ;
      } catch (error) {
        console.error('Error fetching nameSuggestions suggestions:', error);
        return [];
      }
    },
    performExactQuery(nameSuggestions ) {
      // 执行精确查询的逻辑
      console.log('Performing exact query for:', nameSuggestions );
    }
  }
};
</script>

后端代码

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

# 假设使用 SQLite 数据库
def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/api/suggestions', methods=['GET'])
def get_name_suggestions():
    tail = request.args.get('tail')
    if not tail or not (1 <= len(tail) <= 7):
        return jsonify([])

    conn = get_db_connection()
    names= conn.execute('SELECT name FROM table WHERE name LIKE ?', ('%' + tail,)).fetchall()
    conn.close()

    suggestions = [table ['name '] for table in names]
    return jsonify(suggestions)

if __name__ == '__main__':
    app.run(debug=True)

优化回复

  • 输入 4 位：当用户输入完整的 4 位时，直接进行精确查询。
  • 输入小于 4 位：当用户输入 1 到 4 位数字时，系统会根据尾号进行模糊匹配，并显示建议列表。如果用户未从建议列表中选择，则使用模糊查询。
  • 性能优化：通过预先读取数据并在内存中进行匹配，减少数据库查询次数，提高响应速度。