基于vue实现多引擎搜索及关键字提示


Posted in Javascript onMarch 16, 2017

本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下

关键代码:

<div class="header-search">
      <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomplete="off">
        <a>
          <span class="search-media"></span>
        </a>
        <input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
        <span class="del">×</span>
        <a @click="gotoSearch">
          <span class="icon-search icon-sign"></span>
        </a>
      </form>
    </div>
    <div id="pagesZone" class="clearfix">
      <div id="auto"></div>
      <span class="engi">快速搜索:</span>
      <img src="../../dist/images/google.png" alt="谷歌" id="googlePages" @click="gotoGoogle" >
      <img src="../../dist/images/bing.png" alt="必应" id="bing" @click="gotoBing" >
      <img src="../../dist/images/zhihu.png" alt="知乎" id="zhihu" @click="gotoZhiHu" >
      <img src="../../dist/images/sogou.png" alt="搜狗" id="sogo" @click="gotoSogou" >
      <img src="../../dist/images/jd.png" alt="京东" id="jd" @click="gotoJD" >
      <a @click="close" class="close">关闭</a>
    </div>
fillUrls: function() {
        var that = this;
        var strdomin = document.getElementById("searchData").value;
        window.status = "请求中";
        this.$http.jsonp("http://suggestion.baidu.com/su", {  //请求参数
          params: {
           wd: strdomin
          },
          jsonp: 'cb'
        }).then(function(res){
          window.status = "请求结束";
          that.autoDisplay(JSON.parse(res.body).s);
        },function(){
          console.log("error");
        });
      },

      autoDisplay: function(autoStr) {
        var searchText = document.getElementById('searchData');
        var autoNode = document.getElementById('auto'); //缓存对象(弹出框)
        var that = this;
        var docWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var pagesZone = document.getElementById('pagesZone');
        if (autoStr.length == 0) {
          console.log("false");
          autoNode.style.display = "none";
          return false;
        }
        autoNode.innerHTML = "";
        for (var i = 0; i < autoStr.length; i++) {
          //创建节点
          var wordNode = autoStr[i].replace(searchText.value,"<b>"+searchText.value+"</b>");
          var newDivNode = document.createElement('div');
          newDivNode.setAttribute("id",i);
          autoNode.appendChild(newDivNode);
          var wordSpanNode = document.createElement('span');
          wordSpanNode.setAttribute('class','suggText');
          wordSpanNode.innerHTML = wordNode;
          newDivNode.appendChild(wordSpanNode);
          var addNode = document.createElement('span');
          addNode.setAttribute('class','addText');
          addNode.innerHTML = '+';
          newDivNode.appendChild(addNode);
          //鼠标点击文字上屏并搜索
          wordSpanNode.onclick = function () {
            this.highlightindex = this.parentNode.getAttribute('id');
            var comText = autoNode.childNodes[this.highlightindex].firstChild.innerText;
            autoNode.style.display = "none";
            this.highlightindex = -1;
            searchText.value = comText;
            pagesZone.style.display = "none";
            that.gotoSearch();
          };
          //鼠标点击文字上屏
          addNode.onclick = function () {
            this.highlightindex = this.parentNode.getAttribute('id');
            var comText = autoNode.childNodes[this.highlightindex].firstChild.innerText;
            autoNode.style.display = "none";
            this.highlightindex = -1;
            searchText.value = comText;
          };
          //展示
          if (autoStr.length > 0) {
            autoNode.style.display = "block";
          } else {
            autoNode.style.display = "none";
            this.highlightindex = -1;
          }
          //针对手机竖屏时的显示条数控制
          if (docWidth < 500 && i > 3) {
            break;
          }
        }
      },

      close: function() {
        document.getElementById('pagesZone').style.display = 'none';
      },

      listenWords: function(event) {
        console.log("listen keyup");
        var that = this;
        var searchInput = document.getElementById("searchData");
        event = window.event || event;
        if (event.keyCode == 13) {   // enter
          event.preventDefault();
          that.gotoSearch();
        }
        if (event.keyCode == 8) {   // backspace
          console.log(searchInput.value.length);
          if(searchInput.value.length == 0){
            searchInput.blur();
            searchInput.focus();
          }
        }
      },

      listenInput: function() {
        var that = this;
        var searchInput = document.getElementById("searchData");
        var auto = document.getElementById('auto');
        var pagesZone = document.getElementById('pagesZone');
        var del = document.getElementsByClassName('del')[0];
        if (searchInput.value == null || searchInput.value == "") {
          auto.innerHTML = "";
          pagesZone.style.display = "none";
          del.style.display = "none";
          auto.style.display = "none";
          return;
        }
        pagesZone.style.display = "block";
        del.style.display = "block";
        that.fillUrls();
        if (this.highlightindex != -1) {
          this.highlightindex = -1;
        }
      },

多引擎搜索很简单,匹配对应参数就好:

window.location.href = "https://m.zhihu.com/search?q=" + document.getElementById("searchData").value;

百度:https://m.baidu.com/s?word=

谷歌:https://www.google.com/search?q=

必应:https://cn.bing.com/search?q=

知乎:https://m.zhihu.com/search?q=

搜狗:http://wap.sogou.com/web/searchList.jsp?keyword=

京东:http://so.m.jd.com/ware/search.action?keyword=

 关键字提示,先通过jsonp请求参数:

var strdomin = document.getElementById("searchData").value;
        window.status = "请求中";
        this.$http.jsonp("http://suggestion.baidu.com/su", {  //请求参数
          params: {
           wd: strdomin
          },
          jsonp: 'cb'
        }).then(function(res){
          window.status = "请求结束";
          that.autoDisplay(JSON.parse(res.body).s);
        },function(){
          console.log("error");
        });

输入框中有文字的时候触发。

其中JSON.parse用于从一个字符串中解析出json对象。s是suggest words。这里传到autoDisplay的参数即关键字提示。

另外将input元素的autocomplete属性设置为off可以关闭自动提示:

<input type="text" name="name" autocomplete="off">

如果所有表单元素都不想使用自动提示功能,只需在表单form上设置autocomplete=off。

最后将获取到的关键字提示放到input下面的节点中即可。

注意:

<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />

这里因兼容问题绑定了3个事件,其中listenWords专门针对手机键盘的回车键和回退键:

listenWords: function(event) {
        console.log("listen keyup");
        var that = this;
        var searchInput = document.getElementById("searchData");
        event = window.event || event;
        if (event.keyCode == 13) {   // enter
          event.preventDefault();
          that.gotoSearch();
        }
        if (event.keyCode == 8) {   // backspace
          console.log(searchInput.value.length);
          if(searchInput.value.length == 0){
            searchInput.blur();
            searchInput.focus();
          }
        }
      },

如有更好的方式欢迎讨论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
JS简单随机数生成方法
Sep 05 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
Vue中添加过渡效果的方法
Mar 16 #Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 #Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python类继承用法实例分析
2015/05/27 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
详解python中*号的用法
2019/10/21 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
计算机相关的自我评价
2014/01/15 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014年教务处工作总结
2014/12/03 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python