输入框下拉列表模糊搜索功能实现

最新推荐文章于 2024-07-26 16:15:39 发布

csdncvzhanshi

最新推荐文章于 2024-07-26 16:15:39 发布

阅读量442

点赞数

分类专栏： java 文章标签： java spring boot mysql mybatis vue

本文链接：https://blog.csdn.net/csdncvzhanshi/article/details/119204165

版权

本文介绍了如何使用Vue、Axios、SpringBoot、Mybatis和MySQL实现输入框下拉列表的模糊搜索功能。通过Vue的前端交互，结合SpringBoot后端控制器与Mybatis的数据操作，实现对MySQL数据库的模糊查询，达到用户输入时动态显示匹配结果的目标。

摘要由CSDN通过智能技术生成

涉及技术：vue、axios以及springboot 和mybatis mysql

效果如下：

1，贴上html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名查询</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
    姓名查询---拼音查询至少输入4个字符,拼音缩写至少2个字符：
    <input type="text" v-model="input"/>
    <div style="padding-left: 87px" v-for="output in outputs">
        <span style="color: red">{
  {output.name}}</span><br>
    </div>
    <br>
    <br>


</div>
<div id="vue3">
    添加姓名：<input type="text" v-model="addName"/>
    <button @Click="add()">添加</button>
</div>
<br>
全部姓名：
<div id="vue2">
    <ol>
        <li v-for="output in outputs">{
  {output.name}}</li>
    </ol>
</div>
<script>
    var vue3 = new Vue({
        el: "#vue3",
        data: {
            addName: ""
        },
        methods: {
            add: function () {
                var that = this
                axios.get('/addUsername?username=' + that.addName).then(function (response) {
                    location.reload();
                })
            }
        }
    })


    var vue2 = new Vue({
        el: "#vue2",
        data: {
            outputs: ""
        },
        created: function () {
            var that = this
            axios.get('/selectUsernameAll'