基于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 相关文章推荐
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
js 走马灯简单实例
Nov 21 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
在vue中created、mounted等方法使用小结
Jul 21 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue中监听返回键问题
2019/08/28 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python生成随机密码的方法
2017/06/16 Python
Python贪心算法实例小结
2018/04/22 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
学校安全检查制度
2014/01/27 职场文书
就业自我评价
2014/02/04 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android