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

关键代码:

<div class="header-search">
            <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix">
                <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下面的节点中即可。

注意,

<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();
                    }
                }
            },

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

时间: 2024-10-29 04:00:17

基于vue的多引擎搜索及关键字提示的相关文章

VBox 一款基于vue开发的音乐盒 序章

之前自己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudapp.net:3000/index#/index 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶尔也自己上来听听歌曲. 有一天,抬头看,有一片云,特别的蓝,风一吹,一阵花香飘来,美好,

Lucene:基于Java的全文检索引擎简介 (zhuan)

http://www.chedong.com/tech/lucene.html ********************************************** Lucene是一个基于Java的全文索引工具包. 基于Java的全文索引引擎Lucene简介:关于作者和Lucene的历史 全文检索的实现:Luene全文索引和数据库索引的比较 中文切分词机制简介:基于词库和自动切分词算法的比较 具体的安装和使用简介:系统结构介绍和演示 Hacking Lucene:简化的查询分析器,删除的

Lucene:基于Java的全文检索引擎简介

Lucene是一个基于Java的全文索引工具包. 基于Java的全文索引引擎Lucene简介:关于作者和Lucene的历史 全文检索的实现:Luene全文索引和数据库索引的比较 中文切分词机制简介:基于词库和自动切分词算法的比较 具体的安装和使用简介:系统结构介绍和演示 Hacking Lucene:简化的查询分析器,删除的实现,定制的排序,应用接口的扩展 从Lucene我们还可以学到什么 另外,如果是在选择全文引擎,现在也许是试试 Sphinx的时候了:相比Lucene速度更快, 有中文分词的

美团搜索-搜索引擎关键字智能提示的一种实现[转]

http://tech.meituan.com/pinyin-suggest.html --------------------------------------------------------------------- 快照: 问题背景 搜索关键字智能提示是一个搜索应用的标配,主要作用是避免用户输入错误的搜索词,并将用户引导到相应的关键词上,以提升用户搜索体验. 美团CRM系统中存在数以百万计的商家,为了让用户快速查找到目标商家,我们基于solrcloud实现了商家搜索模块.用户在查找商

基于vue.js的简单用户管理

功能描述:添加.修改.搜索过滤 效果图: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>简单用户管理</title> 5 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"

基于Vue的前后端分离项目实践

一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互的逻辑,然后通过网络请求与后端进行数据的交互:后端则着重关注业务逻辑的处理,直接操控数据库. 1.2前后端未分离前(1)jsp + servlet 开发模式: JSP页面:负责视图层的渲染及交互,内部可以嵌入java 代码,在某些场景下开发起来比

数据结构实验之图论二:基于邻接表的广度优先搜索遍历

数据结构实验之图论二:基于邻接表的广度优先搜索遍历 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 给定一个无向连通图,顶点编号从0到n-1,用广度优先搜索(BFS)遍历,输出从某个顶点出发的遍历序列.(同一个结点的同层邻接点,节点编号小的优先遍历) 输入 输入第一行为整数n(0< n <100),表示数据的组数. 对于每组数据,第一行是三个整数k,m,t(0<k<100,0<m<(k-1)*k/2,

基于ε-NFA的正则表达式引擎

正则表达式几乎每个程序员都会用到,对于这么常见的一个语言,有没有想过怎么去实现一个呢?乍想一下,也许觉得困难,实际上实现一个正则表达式的引擎并没有想像中的复杂,<编译原理>一书中有一章专门讲解了怎么基于状态机来构建基本的正则表达式引擎,讲这个初衷是为词法分析服务,不过书里的东西相对偏理论了些,实现起来还是要费些功夫的,只是它到底指明了一条路,当然,书里只针对基本的语法进行了分析讲解,对于在实际中有些非常有用的很多扩展语法,它就基本没有涉及了,这些扩展的语法中有些是比较好实现的,有些则很难. 基

Vue Admin - 基于 Vue &amp; Bulma 后台管理面板

Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组件,其中还有丰富的图表组件,开箱即用.赶紧来体验一下吧. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[