基于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 相关文章推荐
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
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连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js中replace的用法总结
2013/12/27 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
寒假实习自荐信
2014/01/26 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
一年级学生评语
2014/04/23 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
国防教育标语
2014/10/08 职场文书
销售内勤岗位职责
2015/02/10 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers