vue输入框联想词功能

最新推荐文章于 2024-10-04 03:45:37 发布

weixin_33971205

最新推荐文章于 2024-10-04 03:45:37 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端数据库 ViewUI

原文链接：https://juejin.im/post/5b91ebf25188255c7f5e8d8c

该博客介绍了如何使用Vue实现输入框的联想词功能。当用户输入字符时，会显示联想词列表，用户可以通过上下箭头选择或者鼠标点击。同时，文章详细讨论了焦点索引(focusIndex)的管理，确保其始终在合理范围内，并防止不必要的服务器请求。JavaScript部分涵盖了与样式相关的操作以及监听事件，以实现点击输入框外区域隐藏联想词列表并请求后台联想词列表。

1.实现的功能

输入框输入字符后，联想词列表出现，可以按“↓”或“↑”选择列表中的内容，也可以鼠标点选，且互相不影响选择样式，即只会出现一个被选中，“Enter”键发起检索。

2.DOM结构

<template>
    <div class="input-m">  
        <div class="search">    
            <input type="text" :placeholder=placeholder v-model="content" @keyup="input">  
        </div>  
    <ul class="associate-list" v-show="associateWords&&showList" @mouseout="selectedLi(0)">
        <li class="associate-item">{
     
     {inputContent}}</li>    
        <li class="associate-item"