基于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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js tab 选项卡
Apr 26 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
js中数组的常用方法小结
Dec 30 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
用原生js做单页应用
2017/01/17 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
详细分析python3的reduce函数
2017/12/05 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
django 外键model的互相读取方法
2018/12/15 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python实现邮件发送功能
2019/08/10 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
上海微创软件面试题
2012/06/14 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Java 数组的使用
2022/05/11 Java/Android