vue
/
search.html

<!DOCTYPE html>
<html lang="zh-CH">
<head>
	<meta charset="UTF-8">
	<title>搜索列表</title>
	<link rel="stylesheet" href="./css/bootstrap.css">
	<style>
		.color_gra{
			background-color: #ccc;
		}
	</style>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/vue.js"></script>
	<script src="./js/vue-resource.min.js"></script>
</head>
<body>
	<div class="container text-center" id="itany">
		<h2>我的搜索</h2>
		<div class="row form-horizontal">
			<div class="form-group">
				<label for="a" class="control-label col-sm-2">我的search</label>
				<div class="col-sm-10">
					<input name="a" type="text" class="form-control col-sm-6 form-inline" placeholder="请输入关键字" @keyup="search" v-model='keyword' @keydown.up.prevent="up()" @keydown.down.prevent="down()">
					<div style="clear: left;"></div>
					<ul class="text-left" style="margin-top:10px">
						<li v-for="(item,key) in resp" :class="now==key?'color_gra':''">
							{{item}}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script>
		let search = new Vue({
			el : '#itany',
			data : {
				keyword : '',
				resp: [],
				now : -1
			},
			methods : {
				search : function(event) {
					if (event.keyCode == 40 || event.keyCode == 38) {
						return ;
					}
					this.$http.jsonp('http://suggestion.baidu.com/su',
						{
							params : {
								wd: this.keyword
							},
							jsonp : 'cb'
						}
					).then(resp => {
						this.resp = resp.data.s;
					});
				},
				up : function() {
					this.now = --this.now;
					this.keyword = this.resp[this.now];
				},
				down : function () {
					this.now = ++this.now;
					this.keyword = this.resp[this.now];
				}
			}
		});
	</script>
</body>
</html>