Realization of multi engine search and keyword prompt based on vue
- 2021-08-05 08:08:12
- OfStack
This article example for everyone to share vue to achieve multi-engine search and keyword prompt specific code, for your reference, the specific content is as follows
Key code:
<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=" Search 1 Under " 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"> Quick search: </span>
<img src="../../dist/images/google.png" alt=" Google " id="googlePages" @click="gotoGoogle" >
<img src="../../dist/images/bing.png" alt=" Bing " id="bing" @click="gotoBing" >
<img src="../../dist/images/zhihu.png" alt=" Zhihu " id="zhihu" @click="gotoZhiHu" >
<img src="../../dist/images/sogou.png" alt=" Sogou " id="sogo" @click="gotoSogou" >
<img src="../../dist/images/jd.png" alt=" JD.COM " id="jd" @click="gotoJD" >
<a @click="close" class="close"> Shut down </a>
</div>
fillUrls: function() {
var that = this;
var strdomin = document.getElementById("searchData").value;
window.status = " In request ";
this.$http.jsonp("http://suggestion.baidu.com/su", { // Request parameter
params: {
wd: strdomin
},
jsonp: 'cb'
}).then(function(res){
window.status = " End of request ";
that.autoDisplay(JSON.parse(res.body).s);
},function(){
console.log("error");
});
},
autoDisplay: function(autoStr) {
var searchText = document.getElementById('searchData');
var autoNode = document.getElementById('auto'); // Cache object (pop-up box)
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++) {
// Create Node
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);
// Click the mouse on the text screen and search
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();
};
// Click the mouse on the text screen
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;
};
// Display
if (autoStr.length > 0) {
autoNode.style.display = "block";
} else {
autoNode.style.display = "none";
this.highlightindex = -1;
}
// Control the number of display items when the mobile phone vertically screens
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;
}
},
Multi-engine search is very simple, just match the corresponding parameters:
window.location.href = "https://m.zhihu.com/search?q=" + document.getElementById("searchData").value;
Baidu: https://m.baidu.com/s? word =
Google: https://www.google.com/search? q =
Bing: https://cn.bing.com/search? q =
Zhihu: https://m.zhihu.com/search? q =
Sogou: http://wap.sogou.com/web/searchList.jsp? keyword =
JD.COM: http://so.m.jd.com/ware/search.action? keyword =
Keyword prompt, first request parameters through jsonp:
var strdomin = document.getElementById("searchData").value;
window.status = " In request ";
this.$http.jsonp("http://suggestion.baidu.com/su", { // Request parameter
params: {
wd: strdomin
},
jsonp: 'cb'
}).then(function(res){
window.status = " End of request ";
that.autoDisplay(JSON.parse(res.body).s);
},function(){
console.log("error");
});
Triggered when there is text in the input box.
Where JSON. parse is used to parse an json object from a string. s is suggest words. The parameters passed to autoDisplay here are keyword hints.
Additionally, setting the autocomplete attribute of the input element to off turns off automatic prompting:
<input type="text" name="name" autocomplete="off">
If none of the form elements want to use auto-prompt, simply set autocomplete=off on the form form.
Finally, put the obtained keyword prompt into the node under input.
Note:
<input id="searchData" type="text" placeholder=" Search 1 Under " name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />There are three events bound here due to compatibility problems, among which listenWords is specifically for the return key and the back key of the mobile phone keyboard:
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();
}
}
},
If there is a better way to discuss.