vue+jsonp实现神奇的搜索框

Author Avatar
秦晓飞 4月 08, 2017

这是一个神奇的搜索框demo

用到的技术点

  • vue
  • jsonp
  • vue-resouce

    原理

    使用jsonp跨域请求数据，这个小demo中我跨的是百度，你也可以跨其他的网站（任何网站），把请求到的数据添加到视图（页面），然后添加其他功能。

实现步骤

  • 引入vue.js
    k<script src="./js/vue.js"></script>
  • 引入vue-resouce.js
    k<script src="./js/vue-resouce.js"></script>
  • 写html代码
    核心代码就只有一个搜索框,使用vue的数据双向绑定和几个键盘事件
    k<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="chengDown()" @keydown.up.prevent="chengUp()" placeholder="请输入你想搜的内容" class="inputBox">
  • 写js代码
    源码地址
  • 给选中的内容添加高亮
    1
    2
    3
    .gray{
              background-color: gray;
            }

想要更美观可以添加其他样式或者使用bootstrap让样式更美观

expand_less