<div> <form action="http://m.baidu.com/s" method="get" accept-charset="utf-8" autocomplete="off"> <a> <span></span> </a> <input type="text" placeholder="搜索一下" @keyup="listenWords" @input="listenInput" @focus="listenInput" /> <span>×</span> <a @click="gotoSearch"> <span></span> </a> </form> </div> <div> <div></div> <span>快速搜索：</span> <img src="" alt="谷歌" @click="gotoGoogle" > <img src="" alt="必应" @click="gotoBing" > <img src="" alt="知乎" @click="gotoZhiHu" > <img src="" alt="搜狗" @click="gotoSogou" > <img src="" alt="京东" @click="gotoJD" > <a @click="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;
百度：=
谷歌：=
必应：=
知乎：=
搜狗：=
京东：=
关键字提示，先通过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" autocomplete="off">
如果所有表单元素都不想使用自动提示功能，只需在表单form上设置autocomplete=off。
最后将获取到的关键字提示放到input下面的节点中即可。
注意：
复制代码 代码如下:
<input type="text" placeholder="搜索一下" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
这里因兼容问题绑定了3个事件，其中listenWords专门针对手机键盘的回车键和回退键：