el-autocomplete和vue实现二级学科专业的搜索匹配输入

最新推荐文章于 2024-07-19 11:40:44 发布

qiuqiu1894

最新推荐文章于 2024-07-19 11:40:44 发布

阅读量248

点赞数 1

分类专栏： web前端文章标签： vue css javascript jquery node.js

本文链接：https://blog.csdn.net/qiuqiu1894/article/details/103571763

版权

本文介绍了如何使用Vue结合el-autocomplete组件，实现二级学科专业的搜索匹配输入功能。首先，通过Python将377个二级学科数据转化为对象数组并保存为JS文件。接着，在Vue项目的main.js中导入数据，并在组件内利用v-model进行交互，定义相关函数以完成搜索匹配的功能。这是一个初级开发者的学习分享。

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

step1

将377可二级学科存为对象数组
编写python小程序，将txt文件写为对象数组

import json

class myclass:
    pass

file = open("zy.txt","r",encoding="UTF-8")
list = file.read().splitlines()
list2 = []</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qiuqiu1894

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

组件-Element---Input（输入框）

GU_AO_SHI_TAI_DU的博客

07-02

1万+

组件-Element—Input 组件—输入框基础用法 <el-input v-model="input" placeholder="请输入内容"></el-input> <script> export default { data() { return { input: '' } } } </script&g...

Vue2.x element-ui 的 input 组件中的＜el-autocomplete＞组件实现输入和联想并存的下拉功能

黄彪博客

09-30

2731

文章参考 input el-autocomplete 问题描述工作中，遇到一个表单输入的问题，用户要输入公司名称，因此就需要从后台获取关联信息，由于公司信息很多，后台也没有办法完全穷尽，因此返回的提示信息也不全，综合考虑，该字段的最终录入方式 —— 后台提醒 + 用户自己输入思考过程说明第一种方案：如果是要根据用户输入关键字搜索信息，选择用户信息，最常用的就属于 select filter 组件，问题是改组件无法获取用户输入的值，一旦失焦，就会清空用户输入的值第二种方案：依然是使用

参与评论您还未登录，请先登录后发表或查看评论

Vue+element UI组件 el-autocomplete 应用，解决根据选择类型来决定输入建议的数据延迟问题

最新发布

yuxuan89814的专栏

07-19

373

Vue+element UI组件 el-autocomplete 应用，解决根据选择类型来决定输入建议的数据延迟问题

Vue 2 智能提示组件——Vue 2 Autocomplete

gitblog_00095的博客

05-28

610

Vue 2 智能提示组件——Vue 2 Autocomplete vue2-autocompleteVue 2 Component to make Autocomplete element.项目地址:https://gitcode.com/gh_mirrors/vu/vue2-autocomplete Vue 2 Autocomplete 是一款针对 Vue 2 的智能提示组件，基于 vue-...

web前端关于VUE2.0框架使用Element UI el-autocomplete 整合 BMap 关键字提示输入功能中输入框自动填充下拉框数据的使用和问题总结

csdn6107的博客

07-22

1238

web前端关于VUE2.0框架使用Element UI el-autocomplete 整合百度地图关键字提示输入功能中输入框自动填充下拉框数据的使用和问题总结

在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

weixin_30240349的博客

05-30

193

1. 在template加入如下标签 <el-form-item label="文章库" :label-width="formLabelWidth" > <el-autocomplete v-model="addTopic.name" ...

基于Vue el-autocomplete 实现类似百度搜索框功能

10-16

在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...

Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

12-13

我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息，实现快速获取信息的功能，再也不用手动一个个去输入所有的数据啦～ ...

php+html+vue+ajax 获取excel数据实现三级关联下拉

陈加繁的博客

04-03

363

插件：（前端：jquery-weui select 后端：php phpExcel） php后端代码： function get_xw_xk_zd($type_code,$code){//硕士 $path_excel='my_info_ss.xlsx'; $path_excel=WWW.'upload/'.$path_excel; $PHPReader = new PHPEx...

el-autocomplete支持分页上拉加载

梅花寺

01-04

1231

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

vue实现表格的查询，下拉框，以及分页功能

10-25

用vuejs实现表格的模糊查询，下拉框选择表格的分类，表格对应的列显示分类，以及点击某列内容进行跳转，以及分页的上一页下一页功能，和最后一页不能选择

送给刚学vue的同学，学生后台管理系统教学源码。

10-24

学生后台管理系统教学源码，以及最简文章内容发布模块，采用JSON Server简易模拟后端，前端Vuejs+ElementUI。主要知识点：前后端分离，组件，主界面、路由、请求、增删改查等。 npm install --registry=https://registry.npm.taobao.org

el-autocomplete 中下拉数据滚动分页

csstmg的博客

05-22

817

【代码】el-autocomplete 中下拉数据滚动分页。

element 中el-autocomplete下拉列表分页滚动加载

Light_10的博客

10-30

1138

/ 自定义指令，监听el-autocomplete下拉框的滚动，滚动到底部就加载下一页。在需要使用的地方直接使用v-scrollLoad="handleScroll"添加自定义指令函数在main.js抛出，方便系统其他地方可以直接调用。

VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能超简单！！！

zwy15841139493的博客

04-04

1万+

VUE 使用 element-ui 的 el-autocomplete 组件实现输入框提示功能昨天是我第一次接触vue，就分配了一个把下拉框改成带提示功能的输入框的任务，这样提高用户体验，不用从好多选项选出所要的值。我踩了很多雷最后才是实现出来，希望对大家有用。 1.el-autocomplete是elementUI的一个组件，所以先把element-ui引进vue项目中： npm i elem...

vue+element UI带输入建议的输入框el-autocomplete

云中客的博客

12-06

1万+

之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的： companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...

知识点总结:element远程下拉搜索el-autocompleted的自动补全使用方法和注意事项

webfullstack的博客

11-12

4790

注意事项使用时需要注意cb(list)函数里面list的格式,必须存在的是value值代码 <el-autocomplete v-model="formCust.custCellphnNo" class="width-200" @keyup.enter.native="checkTel" @change="checkTel" :fetch-suggestions="q...

element UI的带输入建议el-autocomplete总结（详细，全）

热门推荐

fenger_c的博客

09-14

8万+

引用el-autocomplete 触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug

vue3实现el-autocomplete输入框输入实现下拉列表

05-10

在Vue.js 3中实现自动完成下拉列表的方法很简单，可以使用Vue.js提供的指令和组件的功能来实现。首先，你需要引入ElementUI库，它是一个基于Vue.js的组件库，提供了非常好用的组件和指令。其中el-autocomplete是用来实现输入框的自动完成下拉列表的组件。接下来，你需要在Vue.js的template（模板）中使用el-autocomplete组件，最基本的使用方法如下： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入" /> </template> ``` 在这里，v-model用来绑定输入框的值，placeholder用来设置输入框的提示语，:fetch-suggestions用来绑定一个函数，该函数会在输入框输入时被调用，它的返回值是一个数组，用来显示下拉列表中的选项。接下来，你需要在Vue.js的script（脚本）中实现querySearch函数，该函数需要返回一个Promise对象，用来异步获取输入框输入后的联想词，例如： ```javascript <script> import { ref } from 'vue'; import { fetchSuggestions } from '@/api/suggestion.js'; export default { setup() { const value = ref(''); const querySearch = async (queryString) => { return await fetchSuggestions(queryString); }; return { value, querySearch, }; }, }; </script> ``` 在这里，我们用了Vue.js 3中新增的setup函数，在该函数中，我们使用了ref定义了value变量，并定义了querySearch函数，该函数使用async/await实现异步调用了一个api/suggestion.js的函数fetchSuggestions，该函数的接口可以根据自己的实际需求进行实现。最后，你需要在Vue.js的style（样式）中引入ElementUI的样式，以确保el-autocomplete组件正常显示： ```css @import "element-plus/packages/theme-chalk/src/index.scss"; ``` 综上所述，使用Vue.js 3和ElementUI库实现输入框的自动完成下拉列表功能就这么简单，你只需要引入库、定义组件和指令、实现函数即可。