Home  >  Article  >  Web Front-end  >  Vue.js 2.0 implements Baidu search box

Vue.js 2.0 implements Baidu search box

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 14:38:342859browse

This time I will bring you Vue.js 2.0 to implement Baidu search box. What are the precautions for Vue.js 2.0 to implement Baidu search box. The following is a practical case. Let’s take a look. .

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Vue模拟百度搜索</title>
 <style type="text/css">
 body, html{
  padding: 0;
  margin: 0;
 }
 #box{
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .input{
  width: 500px;
  height: 30px;
  text-indent: 4px;
 }
 .baidu input{
  height: 30px;
  cursor: pointer;
  color: #fff;
  letter-spacing: 1px;
  background: #3385ff;
  border: 1px solid #2d78f4;
 }
 ul{
  padding: 0;
  margin-top: 6px;
 }
 li{
  list-style: none;
  margin: 4px;
 }
 li:hover{
  background: #ccc;
 }
 .bgcolor {
  background: #ccc;
 }
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  new Vue({
   el: '#box',
   data: {
    inputText: '',
    text: '',
    nowIndex: -1,
    result: []
   },
   methods: {
    show (ev) {
     if (ev.keyCode == 38 || ev.keyCode == 40) {
      if (this.nowIndex < -1){
       return;
      }
      if (this.nowIndex != this.result.length && this.nowIndex != -1) {
       this.inputText = this.result[this.nowIndex];
      }
      return;
     }
     if (ev.keyCode == 13) {
      window.open(&#39;https://www.baidu.com/s?wd=&#39; + this.inputText, &#39;_blank&#39;);
      this.inputText = &#39;&#39;;
     }
     this.text = this.inputText;
     this.$http.jsonp(&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;, {
      params: {
       wd: this.inputText
      },
      jsonp: &#39;cb&#39;
     }).then(res => {
      this.result = res.data.s;
     })
    },
    goto () {
     window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
     this.inputText = '';
    },
    gotoItem(item) {
     window.open('https://www.baidu.com/s?wd=' + item, '_blank');
     this.inputText = '';
    },
    down () {
     this.nowIndex++;
     if (this.nowIndex == this.result.length) {
      this.nowIndex = -1;
      this.inputText = this.text;
     }
    },
    up () {
     this.nowIndex--;
     if (this.nowIndex < -1){
      this.nowIndex = -1;
      return;
     }
     if (this.nowIndex == -1) {
      this.nowIndex = this.result.length;
      this.inputText = this.text;
     }
    }
   }
  });
 }
 </script>
</head>
  
<body>
 <p id="box">
 <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129">
  <p>
   <p>
    <input
     type="text"
     class="input"
     placeholder="请输入搜索内容 "
     v-model=&#39;inputText&#39;
     @keyup=&#39;show($event)&#39;
     @keydown.down=&#39;down()&#39;
     @keydown.up.prevent=&#39;up()&#39;
    >
    <span class="baidu" @click="goto()">
     <input type="submit" value="百度一下" >
    </span>
   </p>
    
   <ul>
    <li v-for="(item, index) in result" :class=&#39;{bgcolor: index==nowIndex}&#39; @click="gotoItem(item)">
     {{item}}
    </li>
   </ul>
  </p>
 
 </p>
</body> 
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:



The above is the detailed content of Vue.js 2.0 implements Baidu search box. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn