Vue-搜索框实现

已于 2024-06-26 20:56:51 修改
阅读量9.3k 收藏 65
点赞数 10
分类专栏： 前端 Vue 文章标签： vue.js 前端 javascript
于 2021-10-22 13:56:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52124121/article/details/120904166
版权

热爱生活!  热爱技术！热于分享!

微信号：xmwqhh

一.方法分析

1.字符串匹配(BF算法 KMP算法 库函数indexOf均可实现)

2.v-for循环实时更新元素

3.@click=""实现点击后页面的跳转同时设置不同id来根据内容的不同来跳转到不同页面

二.代码分析：

html代码:

1.设置v-model绑定元素内容

2.goPage(data.id) 写一个函数来根据id不同跳转界面

<div class="container" id="div1">
    <div class="search bar1">
        <form>
            <input type="text" v-model="inputText" placeholder="请输入您要搜索的内容...">
           <button type="submit" @click="Click()"></button>
            <table border="1" cellspacing="0">
                <table>
                <li v-for="data in newDatalist" @click="goPage(data.id)">
                    {{data.content}}
                </li>
                </table>
            </table>
        </form>
    </div>

JS-Vue代码:

1.dataList[]保存原始数据

2.newDataList[]用于搜索下拉列表的内容的呈现

<script>
    var vm=new Vue({
        el:"#div1",//绑定id对象
        data:{//定义属性对象
            id:'',
            content:'',
            inputText:"",//初始化为空
            datalist:[
                {id:'1',content:"热爱计算机"},
                {id:'2',content:"热爱数据结构"},
                {id:'3',content:"热爱生活"},
                {id:'4',content:"腾讯"},
                {id:'5',content:"大家好!Good morning!"},
                {id:'6',content:"oy is studying very hard"},
                {id:'7',content:"Tencent oye!"},
                {id:'8',content:"好好学习"},
                {id:'9',content:"好好吃饭"},
                {id:'10',content:"好好运动"},
                {id:'11',content:"好好做人"},
                {id:'12',content:"赶紧好好写AI方案"}],	//原始数据
            newDatalist:[]
        },
        methods:{
            showData(val){
                let array=val.split(this.keyword);
                val=array.join('<font color="red">'+this.keyword+'</font>');
                return val;
            },
            goPage:function(id){
               if(id==='4'||id==='7'){
                   window.open("https://www.tencent.com/");
               }
               else if(id==='12'){window.open("https://www.paddlepaddle.org.cn/");}
               else {window.open("https://www.baidu.com");}
            },
            Click(){
                
                if(this.inputText==="数据结构")
                {
                    window.open("https://blog.csdn.net/rainchxy/article/details/79454465");
                }
                else {
                    window.open("https://www.baidu.com");
                }
            }
        },
        watch:{//监听输入框的变化
            inputText:function(newText){
                if(newText.length>0){
                    this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
                    for(let value of this.datalist){
                        if(value.content.indexOf(newText)>-1){// 可以直接用indexOf(属性)
                            this.newDatalist.push({
                                id: value.id,
                                content :value.content
                            });//一定要加this

                        }
                    }
                }else{
                    this.newDatalist=[];//输入框为空，等于原始数据
                }
            }
        },
    });
</script>

完整源码: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Research Engine</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            text-align: center;
            margin: 0;
            padding: 0;
            background: #494A5F;
            font-weight: 500;
            font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
        .container {
            margin-top:200px;
            margin-left:380px;
            width: 500px;
            height: 820px;
        }
        div.search {padding: 30px 0;}
        form {
            position: relative;
            width: 300px;
            margin: 0 auto;
        }
        input, button {
            border: none;
            outline: none;
        }
        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }
        button {
            height: 42px;
            width: 42px;
            cursor:pointer;
            position: absolute;
        }
        /*搜索框1*/
        .bar1 {background: #A3D0C3; }
        .bar1 input {
            border: 2px solid #7BA7AB;
            border-radius: 5px;
            background: #F9F0DA;
            color: #9E9C9C;
        }
        .bar1 button {
            top: 0;
            right: 0;
            background: #7BA7AB;
            border-radius: 0 5px 5px 0;
        }
        .bar1 button:before {
            content: "\f002";
            font-family: FontAwesome,serif;
            font-size: 16px;
            color: #F9F0DA;
        }
        li{
            text-align: left;
            width:100%;
            background: #F9F0DA;
            list-style: none;
        }
        li:hover{
            background: #666666;
        }
        a{
            text-decoration: none;
            color:black;
        }

    </style>
</head>
<body>
<div class="container" id="div1">
    <div class="search bar1">
        <form>
            <input type="text" v-model="inputText" placeholder="请输入您要搜索的内容...">
            <button type="submit" @click="new Click()"></button>
            <table border="1" cellspacing="0">
                <table>
                    <li v-for="data in newDatalist" @click="goPage(data.id)">
                        {{data.content}}
                    </li>
                </table>
            </table>
        </form>
    </div>
    <script>
        var vm=new Vue({
            el:"#div1",//绑定id对象
            data:{//定义属性对象
                id:'',
                content:'',
                inputText:"",//初始化为空
                datalist:[
                    {id:'1',content:"热爱计算机"},
                    {id:'2',content:"热爱数据结构"},
                    {id:'3',content:"热爱生活"},
                    {id:'4',content:"腾讯"},
                    {id:'5',content:"大家好!Good morning!"},
                    {id:'6',content:"oy is studying very hard"},
                    {id:'7',content:"Tencent oye!"},
                    {id:'8',content:"好好学习"},
                    {id:'9',content:"好好吃饭"},
                    {id:'10',content:"好好运动"},
                    {id:'11',content:"好好做人"},
                    {id:'12',content:"赶紧好好写AI方案"}],	//原始数据
                newDatalist:[]
            },
            methods:{
                showData(val){
                    let array=val.split(this.keyword);
                    val=array.join('<font color="red">'+this.keyword+'</font>');
                    return val;
                },
                goPage:function(id){
                    if(id==='4'||id==='7'){
                        window.open("https://www.tencent.com/");
                    }
                    else if(id==='12'){window.open("https://www.paddlepaddle.org.cn/");}
                    else {window.open("https://www.baidu.com");}
                },
                Click(){
                    if(this.inputText==="数据结构")
                    {
                        window.open("https://blog.csdn.net/rainchxy/article/details/79454465");
                    }
                    else {
                        window.open("https://www.baidu.com");
                    }
                }
            },
            watch:{//监听输入框的变化
                inputText:function(newText){
                    function next(str) {
                        var prefix = [];
                        var suffix = [];
                        var partMatch;
                        var i = str.length
                        var newStr = str.substring(0, i + 1);
                        for (var k = 0; k < i; k++) {
                            //取前缀
                            prefix[k] = newStr.slice(0, k + 1);
                            suffix[k] = newStr.slice(-k - 1);
                            if (prefix[k] === suffix[k]) {
                                partMatch = prefix[k].length;
                            }
                        }
                        if (!partMatch) {
                            partMatch = 0;
                        }
                        return partMatch;
                    }
                    function KMP(sourceStr, searchStr) {
                        var sourceLength = sourceStr.length;
                        var searchLength = searchStr.length;
                        var result;
                        var i = 0;
                        var j = 0;
                        for (; i < sourceStr.length; i++) { //最外层循环，主串
                            //子循环
                            for (var j = 0; j < searchLength; j++) {
                                //如果与主串匹配
                                if (searchStr.charAt(j) === sourceStr.charAt(i)) {
                                    //如果是匹配完成
                                    if (j === searchLength - 1) {
                                        result = i - j;
                                        break;
                                    } else {
                                        //如果匹配到了，就继续循环，i++是用来增加主串的下标位
                                        i++;
                                    }
                                } else {
                                    if (j > 1) {
                                        i += i - next(searchStr.slice(0, j));
                                    } else {
                                        //移动一位
                                        i = (i - j)
                                    }
                                    break;
                                }
                            }
                            if (result || result === 0) {
                                break;
                            }
                        }
                        if (result || result === 0) {
                            return result
                        } else {
                            return -1;
                        }
                    }
                    function BF(sourceStr,searchStr){
                       var i=0;
                       var j=0;
                       var start=0;
                       while(i<sourceStr.length&&j<searchStr.length)
                       {
                           if(sourceStr[i]===searchStr[j])
                           {
                               i++;
                               j++;
                           }
                           else{
                               start++;
                               i=start;
                               j=0;
                           }
                       }
                       if(j===searchStr.length){return start+1;}
                       else{return -1;}
                    }
                    if(newText.length>0){
                        this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
                        for(let value of this.datalist){
                            if(KMP(value.content,newText)>-1){// 可以直接用indexOf(属性)
                                this.newDatalist.push({
                                    id: value.id,
                                    content :value.content
                                });//一定要加this

                            }
                        }
                    }else{
                        this.newDatalist=[];//输入框为空，等于原始数据
                    }
                }
            },
        });
    </script>
</body>
</html>

厦门摩块诗信息科技
关注
  • 10
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
开发多个项目之后的一些感想....
09-11 189
软件开发这行业的创新来源于需求，有了需求才能带动技术的提高和变革，不然只能是"闭门造车"。因此想要开发好一款好的软件，就得实实在在地了解客户需求。经过几个项目之后，软件开发的工程化思想也愈加成熟。让自己渐渐爱上了这门行业，特别是当自己的技能能够转化成一定的财富的时候，那种心情是难以表述的。使用到技术栈基本上是Vue+Spring Boot的组合，期间要忙着处理各种定制化需求，还要沟通交流，然后就是项目报酬的问题都是要谈的。最近这半年接触到了不少项目需求，外卖平台搭建、物流平台搭建、仿真控制面板等...
博客
Spring MVC 框架入门
05-05 232
1.框架目录结构目录分析:（1）控制器层package com.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class HelloController { @RequestMapping("/hello")//方法的url地址 ..
博客
Vue前后端分离示例
04-17 694
一.账号密码登录1.前端: <el-form-item prop="username"> <el-input type="text" v-model="formLogin.username" placeholder="用户名"> <i slot="prepen..
博客
Vue解决跨域问题
04-10 1558
场景:来源于团队成员的分享注意:vue.config.js更新完后要记得重启（一）新建vue.config.js 并配置module.exports = { devServer: { open: true, host: 'localhost', port: 8081, https: false,//如果是https 还要加上secure:false //以上的ip和端口是我们本机的;下面为需要跨域的
博客
SQL查询之美
03-30 563
三张表:1.Student表2.Course表3.SC表问题:一.查询选修了全部课程的学生姓名分析:(1)将该命题转为:不存在该学生没有选修的课程二.查询至少选修了学生201215122选修的全部课程的学生学号分析:(1)将该命题转为:不存在没有一门课(被学生201215122选择的课)没有被该生选择的学生学号和姓名每日一句:"Don't waste it time living someone else life" ...
博客
关于@font-face
03-27 740
场景:昨天在同学因为不想弄CND 于是自己下载Bootstrap包并导入,但字体图片无论怎么样都显示不了，于是加了下面几行代码就弄好了探索过程:1.后来我Ctrl+左键 去查看对应的源码发现font-family有一个自定义的字体样式这个字体样式需要我们自己导入 也就是用到了@font-face@font-face是CSS中的一个模块 用于导入自定义字体样式分析下@font-face的语法/*一.常用的字体格式:woff ttf eot otf svg二.对应的..
博客
Android开发之ConstraintLayout布局
03-08 2603
"Beneath no one"知识点:（约束布局其实是会相对制约的）一.根据父组件布局 app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="p.
博客
Java多线程实例
01-06 638
模拟龟兔赛跑实现方法:1.定义一个抽象类Animal 继承Thread类2.在animal类中定义抽象方法 runing 然后在重写的run方法中调用3.创建一个接口 并声明一个接口对象 用于后面作为回调函数使用4.子类去重写running方法:5.回调类6.主函数...
博客
哈夫曼树构造，编码，译码
11-28 507
code is beautiful运行结果：使用频率小的编码尽量短详解:1.构造(链表实现)要点:一.采用STL优先队列筛选出权值小的两个节点,重写比较方式struct cmp { //重写仿函数 bool operator()(Node* a, Node* b) { return a->weight > b->weight;//小顶堆...
博客
sql实现学生信息查询
11-05 6011
效果图:一.方法概要1.字符串拼接 implode2.多表查询3.php变量在sql的引用二.详解:1.插入数据时由于涉及多次操作考虑自写insert()函数,提高效率function insert($table,$arr,$link){ $keys=implode(',',array_keys($arr));//根据逗号分割数组的key值 $vals="'".implode("'".','."'",array_values($arr))."'..
博客
sql实战入门
10-31 221
功能:前端页面获取用户姓名 和 发布的内容并加载到数据库中 然后提取数据库的数据显示在前端页面效果图:方法解析:一.表单获取用户数据 login.php 和 main.php1.login.php<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户登录</title><...
博客
CSS实现1024动画
10-24 268
效果图:一.方法要点:1.animation函数使用2.nth-child(n)控制子元素3. @keyframes+自定义函数 来定义动画规则和关键帧二.核心代码讲解:1animation: myMove 1.5s ease alternate infinite;参数对应: name,durationm,timing-function,direction,iteration-count2.(1)其中0% 50% 100%定义不同时刻的帧(2)rotateY
博客
两行js代码实现页面横向滚动
10-16 602
1.HTML代码:<main> <div class="container"> <div class="page">Page1</div> <div class="page">Page2</div> <div class="page">Page3</div> </div></main>2.JS代码:deltaY:鼠标滚轮往上移动，de...
博客
C++表达式求值
10-08 916
"sharinghappiness is happy" -2021-10-8一.细节处理:1.注意负数 因此要进行字符串预处理string format(string str) { int len = str.length(); fo...
博客
javascript动态网页
09-26 1012
1. 效果图 源码:
博客
CSS实现动态按钮
09-24 640
1.animate（）函数使用$(selector).animate(styles,speed,easing,callback)分析:1.导入Jquery地址<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="jquery.color.js"></script>我的github下载地址：...
博客
Bootstrap实现Markdown编辑器
09-19 1220
进腾讯 效果图:争取写出一个直接获取鼠标键盘事件的web界面，而无须通过标签进行操作 一.工具简介1.Bootstrap框架2.ace编辑器3.javascript中highlightjs在我的git hub上可下载全部源码（包括工具包）下载后直接可运行GitHub: Where the world builds...
博客
完全二叉树应用
09-07 420
完全二叉树:假如该树的总层数为k层，则k-1层为满二叉树，第k层叶子节点尽量位于左子树题目:http://xujcoj.com/home/problem/detail/2921题解:1.利用队列优先插入左节点2.然后采取层次遍历，去访问每个节点3.该写法要注意root根节点和左右节点都要在构造函数中进行初始化AC代码:#include<iostream>#include<cstring>#include<queue>using nam.
博客
约瑟夫环问题
09-05 117
题目:https://codeforces.com/problemset/problem/792/B大意:n个人围成一圈，每次leader点离他为a距离的人出局，出局人的下一个变为leader,然后输出出局顺序题解:用数组模拟约瑟夫环#define _CRT_SECURE_NO_WARNINGS#include<iostream>#include<algorithm>#include<cstring>#include<map>using
博客
floyd进阶,最大频率栈，反向链表，kthsmallest
09-05 149
1.反向输出链表(利用栈的特性)p2 = p1->next;p3 = p2->next; //p2会产生空指针 因为p1->next是空 不能赋值给p2否则会报错应该写成:p1->next=p2;p2->next=p3;#define _CRT_SECURE_NO_WARNINGS#include<bits/stdc++.h>using namespace std;//反向输出链表 采用栈的特点struct ListNode{ i

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值