个人网站创建百度搜索框

需求分析

点击提交按钮或者按回车键时，将输入框中的内容作为关键字进行百度搜索，在新的页面显示搜索结果。
当输入框中的内容变更时，将输入框中的内容作为关键字，用jsonp跨域请求的方式获取百度的suggestion数据，实时显示出来。
当鼠标移动到对应的suggestion项上时，该项高亮，并将输入框中的内容更新为该suggestion的内容。此时点击鼠标或者按回车键时，执行搜索操作。
也可以按键盘上下键来选取对应的suggestion项，按回车键执行搜索操作。注意设置suggestion列表为循环结构，即在最后一项时按下键选中第一项，在第一项时按上键选中最后一项。
当输入框失去焦点时，删除suggestion列表。

代码实现

*1. 基本组件

<div><input id="input_search" type="text" oninput="getSuggestion()" onblur="hiddenSuggestion()" onkeydown="move(event)">                          <div id="suggestion" hidden="hidden"><ul id="suggestionUl"></ul></div>
</div>
<div><input type="button" value="Search" onclick="search()">
</div>

*2. 输入框内容变化时调用getSuggestion方法

function getSuggestion(){var strdomin = $.trim($("#input_search").val());  //jsonp跨域请求，参数wd为关键字；参数p恒为3，暂时不知道用途；参数cb为请求成功后的回调函数的名字，自己实现这个函数来处理得到的数据var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'getData' };  $.ajax({async: false,  url: "http://suggestion.baidu.com/su",  type: "GET",  dataType: 'script',    data: qsData,  timeout: 500,  success: function (json) {  },  error: function (xhr) {    }  });
}

*3. 编写回调函数getData获取suggestion数据并显示

function getData(mydata){//参数mydata即为返回的数据，suggestion以数组形式保存在mydata.s中//先清除原来的suggesion列表clearSuggestion();var length = mydata.s.length;var data = mydata.s;if (length == 0) {//没有请求到suggestion时则不显示suggestion列表hiddenSuggestion();} else {//显示suggestion列表showSuggestion();//suggestionLength和index是两个全局变量，代表列表项长度和索引，在编写键盘事件函数时会用到suggestionLength = (length > 10 ? 10 : length);index = 0;for (i = 0; i < (length > 10 ? 10 : length); i++) {var li = $("<li id='li"+i+"' onMouseOver='mouseOverEvent(this)' onMouseOut='mouseOutEvent(this)' onclick='search()'></li>").text(data[i]);$("#suggestionUl").append(li);}}
}

*4. suggestion列表的显示、隐藏、清除函数

function showSuggestion(){$("#suggestion").removeAttr("hidden");
}
function hiddenSuggestion(){$("#suggestion").attr("hidden","hidden");
}
function clearSuggestion(){$("#suggestionUl").html("");
}

*5. 编写鼠标事件函数

function mouseOverEvent(x){$("#input_search").val(x.innerHTML);//更新输入框的内容x.className = "mouseOver";//修改样式为高亮//若不清除onblur属性，在点击鼠标时，将先执行hiddenSuggestion方法，这样鼠标就点击不到对应的suggestion项，无法执行search方法进行搜索$("#input_search").removeAttr("onblur");
}
function mouseOutEvent(x){x.className = "mouseOut";//将样式恢复原样$("#input_search").attr("onblur","hiddenSuggestion()");
}

*6. 编写键盘事件函数

function move(x){if (x.keyCode == 13) {//按回车，则执行搜索操作search();} else if (x.keyCode == 40 && index == 0) {//若第一次按下键，则选中第一个suggestion项，并更新索引值var li0 = document.getElementById("li0");mouseOverEvent(li0);index = 1;} else if (x.keyCode == 40 && index == suggestionLength) {//若在选中最后一个suggestion项时按下键，则选中第一个suggestion项，并更新索引值var li0 = document.getElementById("li0");mouseOverEvent(li0);var li = document.getElementById("li"+(suggestionLength-1));mouseOutEvent(li);index = 1;} else if (x.keyCode == 38 && index == 1) {//若在选中第一个suggestion项时按上键，则选中最后一个suggestion项，并更新索引值var li = document.getElementById("li"+(suggestionLength-1));mouseOverEvent(li);var li2 = document.getElementById("li0");mouseOutEvent(li2);index = suggestionLength;} else if (x.keyCode == 38) {//按上键的普通情况var li2 = document.getElementById("li"+(index-1));index--;var li = document.getElementById("li"+(index-1));mouseOverEvent(li);mouseOutEvent(li2);} else if (x.keyCode == 40) {//按下键的普通情况var li2 = document.getElementById("li"+(index-1));index++;var li = document.getElementById("li"+(index-1));mouseOverEvent(li);mouseOutEvent(li2);}
}

*7. 编写搜索操作函数

//注意要先把输入框中的内容转码，防止出现#截断符号使其后内容被忽略的情况
function search(){hiddenSuggestion();var value_search = encodeURIComponent($.trim($("#input_search").val()));window.open("https://www.baidu.com/s?wd="+value_search);
}

网站链接

http://www.francis2017.cn/lixiao

个人网站创建百度搜索框相关推荐

html目录框中增加搜索引擎,网站如何添加搜索框？百度站内搜索安装技巧
站内搜索基本上是网站的一个标配了,几乎所有的大型网站都有一个站内搜索框供读者搜索使用,方便用户查找到自己需要的内容.(当然个别网站除外,如单页面网站)写这篇文章是碰到一位网友说他做的织梦站搜索框失效了 ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
百度搜索框代码（有下拉提示的）
根据不同类型的网站需求,我们一共提供三种引入方式供您选择: ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有&qu ...
html怎么创百度搜索框,JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下实现原理向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创 ...
php网页制作中搜索框的代码,在网页里嵌入百度搜索框功能
今天发现某个网站是直接使用百度搜索作为自己网站的搜索功能的,感觉这个挺好玩的,不需要去研究复杂的搜索算法而又直接使用了百度搜索这个强大的搜索引擎为自己撑腰.无论对自己还是对用户来说都是相当不错的选择, ...
彻底删除百度搜索框历史记录
彻底清空百度搜索框历史记录百度搜索.... 解决方案1: 一劳永逸解决方案2: 方便灵活解决方案3: 堪比无痕模式百度搜索- 当你在Chrome浏览器用完百度引擎之后,压根无清空按钮-登录账号 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...

个人网站创建百度搜索框

需求分析

代码实现

网站链接

个人网站创建百度搜索框相关推荐

最新文章

热门文章