前言:

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

需要插件:

• 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，如果你觉得这该死的“下拉栏”太丑了（不丑就怪了呢）~