Bootrap+Vue implémente l'imitation de la fonction de l'interface de recherche Baidu-js tutoriel-php.cn

Bootrap+Vue implémente l'imitation de la fonction de l'interface de recherche Baidu

php中世界最好的语言

Libérer： 2018-04-16 15:44:47

original

2245 Les gens l'ont consulté

Cette fois, je vais vous présenter Bootrap+Vue pour implémenter les fonctions d'interface de recherche de type Baidu. Quelles sont les précautions pour que Bootrap+Vue implémente les fonctions d'interface de recherche de type Baidu. , jetons un coup d'oeil.

Utilisez Vue pour appeler l'interface de recherche de Baidu afin d'implémenter une fonction de recherche simple.

Le style du champ de recherche est basé sur Bootstrap. Bien entendu, le style a été simplement ajusté pour le rendre similaire à la recherche Baidu. Le code est le suivant

nbsp;html>


  <meta>
  <title>百度搜索</title>
  <style>
    .gray{
      background-color: #eee;
    }
    .listyle{
      font-size: 16px;
      line-height: 35px;
      padding-left: 16px;
    }
    .ulstyle{
      border:1px solid #ccc;
      border-top: none;
    }
  </style>
  <link>
  <script></script>
  <script></script>
  <script>
    window.onload = function(){
      new Vue({
        el: ".container",
        data: {
          myData:[],
          txt:"",
          nowIndex:-1
        },
        methods:{
          get:function(event){
            if(event.keyCode==38 || event.keyCode==40){
              return;
            }
            if(event.keyCode==13){
              window.open("https://www.baidu.com/s?wd="+this.txt);
              this.txt="";
            }
            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
              wd:this.txt
            },{
              jsonp:"cb"
            }).then(function(res){
              this.myData=res.data.s
            },function(res){
              alert(res.status);
            });
          },
          changeDown:function(){
            this.nowIndex++;
            if(this.nowIndex==this.myData.length){
              this.nowIndex=0;
              this.txt=this.myData[0];
            }else{
              this.txt=this.myData[this.nowIndex];
            }
          },
          changeUp:function(){
            this.nowIndex--;
            if(this.nowIndex==-1){
              this.nowIndex=this.myData.length-1;
              this.txt=this.myData[this.nowIndex];
            }else{
              this.txt=this.myData[this.nowIndex];
            }
          },
          mouseOver:function(n){
            this.nowIndex=n;
            this.txt=this.myData[this.nowIndex];
          },
          getMsg:function(){
            window.open("https://www.baidu.com/s?wd="+this.txt);
            this.txt="";
          }
        }
      });
    }
  </script>


  <br>
  <p>
    </p><p>
      <input>
      <span>
        <button>搜索</button>
      </span>
    </p>

Copier après la connexion

{{item}}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des requêtes réseau encapsulées AFN

Explication détaillée de l'utilisation de l'environnement Node.js variable process.env

Bootrap+Vue implémente limitation de la fonction de linterface de recherche Baidu Explication détaillée sur l'utilisation des exports et module.exports de node.js et ES6