使用VUE JS配合LARAVEL来实现搜索自动联想功能

前言:

这是我第一次记录下我在网页技术方面的开发经验,我在网页技术上还算个萌新(虽然在大学里读过几门基础课),如果那里有什么地方写的不够好还请大佬们多多指点~

需要插件:

  • vue-typeahead (vuejs的一个自动联想插件)
  • Axios (vuejs 的Restful API请求插件)

前端编写

1.使用npm安装 vue-typeahead插件

npm install --save vue-typeahead

安装完后如图。

注(如果你是使用最新的Laravel框架作为开发的话,你是不需要去手动安装axios,因为集成了)

2.使用watch 来监视和编译前端的JS

npm run watch

输完这个指令之后,前端js代码就会在更新时自动编译了。

3.创建一个新的vue component并注册成组件

新创建一个名为“Search”的组件,当然你也可以改成其他你喜欢的名称。

 

别忘了在app.js注册它

3.进入刚才创建的Search.vue

把作者的demo代码复制进去 (来源Github地址

因为要VueTypeahead需要一个Http Client,所以别忘了import Axios进来

import Axios from 'axios'
Vue.prototype.$http = Axios

然后放置位置如下:

对于Data,此插件作者留下了几个选项,你可以根据你的情况使用它们

    data () {
        return {
            // 你请求查询服务端的Restful API地址 (必填)
            src: '/api/midis/search',
            // 通过请求发送的数据(可选) - 这个根据你服务端查询API的设计来定就可以了
            data: {},

            // 联想下拉列表中最大有几行(可选)
            limit: 5,

            // 从第几个字符后开始请求API查询(例如3的话当用户输入ABC到C这个时候前端才开始对服务端查询可能的搜索词)
            minChars: 3,

            // 突出显示列表中的第一个项目(可选)
            selectFirst: false,
        }
    },

    methods: {
        // 当用户选中列表中某个元素之后的事件
        // (必要)
        onHit (item) {
        
        }

    }

现在要来对服务端API地址进行编写了

服务端编写

4.首先回到服务端

进入web.php (路由定义文件),新增一个路由,用来处理前端的搜索请求的

我这里就设为在/api/midis/search这个路径来处理情况搜索请求,并把可能的关键字给返回给前端。(当然你可以根据情况换成其他的类似的操作同理)

定义好了路由后,可以开始实现服务端的apiSearch method了

5.实现服务端的apiSearch方法

接着,用浏览器手动输入这个地址来测试下这个API是否工作

看来服务端API一切正常,我们可以继续回到前端去实现前端的API查询了

5.回到之前的Search.vue

把src 改成之前我们定义的查询用的API地址:

别忘了把v-text 加个.item,因为我们只要显示那对json里面的title而已

修改完了后回到浏览器去测试下

OK~看来一切都很顺利,前端正确的拿到了查询后的结果了

现在可以优化下,顺便把singer 也给append到title后面

<span v-text="item.title + ' - ' + item.singer"></span>

OK,现在好看多了~

剩下就是编写当用户选中列表里的某个搜索词,然后把自动放入到上面的input里。

还记得之前提到了 onHit() 方法吧,这个event 会在用户选中列表中某个item后调用,所以这里就是接下来要接着实现的地方。

6.实现 onHit method

首先来个alert测试下,用户选中某个item后,是否正确执行了

    methods: {
        // 当用户选中列表中某个元素之后的事件
        // (必要)
        onHit (item) {
            alert(item.title)
        }

    }

我刚才选了title 为Test 2233的数据,然后alert弹窗里面也正确显示出来了,证明我们已经正确的拿到了数据了~

好那就不多说废话开始上代码吧

在作者的demo 演示代码中,可以看到 v-model=”query”, 也就是说,我们可以通过query来访问这个元素

首先删除掉这一行不然当你文本框失焦后,里面的值会被rest掉,这不是我们想要的。

所以改变文本框的里的value的话,只要对query进行赋值就可以了,所以接下来就这么写:

    methods: {
        // 当用户选中列表中某个元素之后的事件
        // (必要)
        onHit (item) {
            this.query = item.title
        }

    }

OK来测试看看

恭喜你,现在最基础的功能基本全部写完,剩下的就是折腾下CSS,如果你觉得这该死的“下拉栏”太丑了(不丑就怪了呢)~

 

使用VUE JS配合LARAVEL来实现搜索自动联想功能」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください