Vue.js与resource.js实现百度搜索下拉列表功能：360接口应用

vue.js

需积分: 11 9 浏览量更新于2024-09-07 收藏 2KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

本篇文章主要介绍了如何使用Vue.js和vue-resource库来模拟实现一个类似百度搜索的下拉列表功能。首先，我们注意到文档引用了Vue.js v2.5.17版本和vue-resource v1.5.1版本，这表明开发者选择的是这两个较旧但稳定且功能强大的前端框架。在HTML部分，`<head>`标签中引入了Vue.js和vue-resource的脚本，确保页面加载后可以正常使用这些库。`window.onload`事件监听器用于在页面加载完成后初始化Vue实例。在这个实例中，`el`属性设置为"#app"，表示应用将挂载到页面上这个ID为"app"的元素上。数据部分，`myData`数组用于存储从360搜索接口获取的建议词，`t1`变量用于存储用户输入的关键词，`now`用于跟踪当前选中的选项索引。`methods`对象定义了两个处理用户输入和导航的关键方法： 1. `add`方法：当用户按下回车键或键盘方向键时，如果输入的不是特定按键组合（如向上或向下箭头），则打开百度搜索结果页。同时，通过`$http.jsonp`方法向奇虎360的搜索接口发送请求，获取与用户输入的关键词相关的搜索建议。然后，将返回的数据赋值给`myData`。 2. `changeDown`和`changup`方法：这两个方法分别处理下拉列表的滚动操作。`changeDown`负责向下移动并更新显示的建议词，而`changup`则负责向上移动。当滑动到列表末尾或开头时，会将`now`重置回列表的起始或结束位置，保持当前项的显示。在CSS部分，可能有一个`.gray`类用于样式化下拉列表或某些状态下的元素，但具体样式代码未在给出的部分展示。总体来说，这篇文章的核心知识点是利用Vue.js的响应式数据绑定和组件化特性，结合vue-resource库进行异步数据请求，实现了基于用户输入动态获取并显示搜索建议的功能，这种模拟搜索引擎下拉列表的行为有助于提升用户的搜索体验。

资源详情

资源推荐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件深入</title>
<script src="vue.js/dist/vue.js"></script>
<script src ="vue-res.js"> </script>
<script>
window.onload = function () {
new Vue({
el:"#app",
data:{
myData:[],
t1:"",
now:-1
},
methods:{
add:function (ev) {
if(ev.keyCode==38 || ev.keyCode==40)return;//利用键码来阻止继续上下的事件发生继续搜索
if(ev.keyCode==13){//按下回车就触发window,open函数打开新的窗口
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}

this.$http.jsonp('https://sug.so.360.cn/suggest',{//这个是360搜索的接口
params:{//切记记得加params 这个参数，不然直接{}的话，参数绑定不了上jsonp
word:this.t1
}
}).then(function (res) {
this.myData = res.data.s//把回调函数的结果给到数组

下载后可阅读完整内容，剩余2页未读，立即下载