<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉框搜索框</title> <script src="vue.js"></script> <script src="vue-resource.js"></script> <style type="text/css"> ul{ width: 300px; overflow: hidden; } .active{ background: #ddd; } </style> </head> <body> <div id="example"> <input type="text" v-model="msg" @keyup="get()"/> <input type="button" value="提交" @click="submit()"/> <ul> <li v-for="item in datalist" @click="toUp(item)" @mouseover="hover($index)">{{item}}</li> <!--//item 模板語言 將數據顯示到視圖上 點擊之後所選的項目移動到 鼠標滑過變色 輸入框中 --> </ul> <p v-show="datalist.length == 0">暫無數據.......</p> </div> <script> var vm=new Vue({ el:"#example", data:{ msg:"", datalist:[]//將從後臺取到的數據放到數組中，然後在在頁面循環顯示 }, methods:{ get: function () { this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{ wd:this.msg },{jsonp:"cb"}).then(function (res) { this.datalist=res.data.s; }, function (res) { alert(res.status) }) }, submit: function () {//提交的跳轉 window.open("https://www.baidu.com/s?wd="+this.msg); }, toUp: function (value) { this.msg=value; //數組清空 this.datalist=[]; }, hover: function (index) { console.log(index); // :class="{avtive:true}" changeColor(index) } } }); //在使用任何框架的時候，有的東西寫不出來的時候，可以採用原聲的js function changeColor(index){ var oul=document.getElementsByTagName("ul")[0]; var oLi=oul.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++){ oLi[i].className=""; } oLi[index].className="active" } </script> </body> </html>
