前言:
这是我第一次记录下我在网页技术方面的开发经验,我在网页技术上还算个萌新(虽然在大学里读过几门基础课),如果那里有什么地方写的不够好还请大佬们多多指点~
需要插件:
- 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,如果你觉得这该死的“下拉栏”太丑了(不丑就怪了呢)~
不错!支持一下
另外,新年快乐!
哈哈新乐快乐~