基于vue实现多引擎搜索及关键字提示
程序员文章站
2023-11-19 19:43:16
本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下
关键代码:
本文实例为大家分享了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;
百度:=
谷歌:=
必应:=
知乎:=
搜狗:http://wap.sogou.com/web/searchlist.jsp?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(); } } },
如有更好的方式欢迎讨论。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Hadoop基础教程02
下一篇: MyBatis批量修改操作