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

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>
    

      
• {{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

Explication détaillée sur l'utilisation des exports et module.exports de node.js et ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!