vue简单写一个搜索框搜索时模糊提示

会fei的刘博士

已于 2022-10-11 16:38:59 修改

阅读量930

点赞数

文章标签： javascript servlet java

于 2022-10-11 16:25:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61233367/article/details/127266115

版权

本文展示了如何在Vue项目中创建一个搜索框，实现用户输入时的模糊搜索提示功能。通过监听`@input`、`@focus`和`@blur`事件，实时更新搜索结果显示列表。使用`v-for`遍历数据并展示匹配项，当输入为空或失去焦点时，隐藏提示列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搜索框模糊提示

HTML部分

<template>
   <div class="content">
       <input v-model="value" label="搜索" placeholder="请输入用户名"         @input="searchchange" @focus="focuschange"
           @blur="blurchange" />
       <ul class="Newbox" v-if="Isshow">
           <li v-for="(item,index) in newsListTow" :key="index">
               {{item}}
           </li>
       </ul>
   </div>
</template>

Js部分

<script>
   export default {
       data() {
           return {
               value: null,
               newsList: [
                   '软件园三期B1栋', '软件园三期B2栋', '软件园三期B3栋',
                   '集美园三期B4栋', '集美园三期B5栋', '集美园三期B6栋', '集美园三期B7栋',
               ],
               newsListTow: [],
               Isshow: false
           };
       },
       methods: {
           searchchange() { //输入框时输入中事件
               if (this.value == '') {
                   this.Isshow = false
               } else {
                   this.newsListTow = [] //防止从复
                   this.newsList.forEach(item => {
                       if (item.indexOf(this.value) != -1) {
                           this.newsListTow.push(item)
                       }
                   })
                   this.Isshow = true

               }
           },
           focuschange() { //鼠标点击时焦点事件
               if (this.value == '') {
                   this.Isshow = false
               } else {
                   this.Isshow = true
                   this.newsListTow = []
               }
           },
           blurchange() { //输入移除框事件
               this.Isshow = false
           },

       },
   };
</script>

CSS 部分

<style>
   input {
       width: 320px;
       height: 30px;
       margin-top: 10px;
       margin-left: 110px;
   }

   .Newbox {
       width: 300px;
       height: auto;
       border: 1px solid #ccc;
       margin-left: 110px;
       padding: 10px;
       margin-top: 10px;
   }

   .Newbox li {
       font-size: 14px;
       margin-bottom: 10px;
       cursor: pointer;
   }

   .Newbox li:hover {
       color: darkgoldenrod;
   }
</style>