因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text,
都没带Value的 所以做了个.
直接贴代码。

autopoint.js代码:

复制代码 代码如下:

复制代码 代码如下:

(function($) {
var timeid;
var lastValue;
var options;
var c;
var d;
var t;
$.fn.autoComplete = function(config) {
c = $(this);
var defaults = {
width: c.width(), //提示框的宽度 默认跟文本框一样
maxheight: 150, //提示框的最大高度
top: 6, //与文本框的上下距离
url: “”, //ajax 请求地址
type: “post”, //ajax 请求类型
async: false, //是否异步请求
autoLength: 0, //文本长度大于0 就请求服务器
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行
clearValue: function(){ }, //当重新请求时清空Value值
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行
};
options = $.extend(defaults, config);
var p = c.position();
d = $(‘<div id=”autoComplete_Group”></div>’);
c.after(d);
d.css({ “left”: p.left, “top”: p.top + c.height() + options.top,
“width”: options.width, “max-height”: options.maxheight });
t = $(‘<table cellspacing=”0″ cellpadding=”2″></table>’);
d.append(t);
d.append(‘<input style=”display:none” />’);
c.bind(“keydown”, keydown_process);
c.bind(“keyup”, keyup_process);
c.bind(“blur”, blur_process);
d.bind(“focus”, focus_div);
d.bind(“mouseout”, mouseout_div);
}
function blur_process()
{
timeid = setTimeout(function(){
d.hide();
},200);
}
function mouseout_div()
{
t.find(“.nowRow”).removeClass(“nowRow”);
}
function focus_div()
{
clearTimeout(timeid);
c.focus();
}
function keydown_process(e)
{
if(d.is(“:hidden”)){
return;
}
switch(e.keyCode)
{
case 38:
e.preventDefault();
var p = t.find(“.nowRow”).prev();
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover();
}else{
p = t.find(“tr:last”);
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover();
}
}
break;
case 40:
e.preventDefault();
var n = t.find(“.nowRow”).next();
if(n.length > 0){
d.setScroll(options.maxheight, n);
n.mouseover();
}else{
n = t.find(“tr:first”);
if(n.length > 0){
d.setScroll(options.maxheight, n);
n.mouseover();
}
}
break;
case 13:
e.preventDefault();
var n = t.find(“.nowRow”);
if(n.length > 0){
options.getValue(n.find(“input:hidden”).val());
c.val(n.text());
options.getText(c.val());
lastValue = “”;
d.hide();
}
break;
}
}
function keyup_process(e)
{
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode ==
37 || e.keyCode == 39){
return;
}
if(c.val().length > options.autoLength){
if(c.val() == lastValue){
return; //判断是否跟上一次的值相等, 考虑到用户正在打字
避免相同的值多次请求
}
lastValue = c.val(); //记录请求值
options.clearValue(); //清空值
getData(c, function(data){
if(data.length == 0){
d.hide();
return;
}
t.find(“tr”).remove();
$.each(data, function(){
t.append(‘<tr><td>’ + this.text + ‘<input type=”hidden”
value=”‘ + this.value + ‘” /></td></tr>’);
});
var rows = t.find(“tr”);
rows.mouseover(function(){
t.find(“.nowRow”).removeClass(“nowRow”);
$(this).addClass(“nowRow”);
});
rows.click(function(){
options.getValue($(this).find(“input:hidden”).val());
c.val($(this).text());
options.getText(c.val());
lastValue = “”;
d.hide();
});
c.setPosition();
d.show();
});
}else{
lastValue = “”;
d.hide();
}
}
function getData(o,process)
{
$.ajax({
type: options.type,
async: options.async, //控制同步
url: options.url,
data: o.attr(“id”) + “=” + o.val(),
dataType: “json”,
cache: false,
success: process,
Error: function(err) {
alert(err);
}
});
}
$.fn.resetEvent = function()
{
c.bind(“keydown”, keydown_process);
c.bind(“keyup”, keyup_process);
c.bind(“blur”, blur_process);
d.bind(“focus”, focus_div);
d.bind(“mouseout”, mouseout_div);
}
$.fn.setPosition = function()
{
var p = c.position();
d.css({ “left”: p.left, “top”: p.top + c.height() + options.top });
}
$.fn.setScroll = function(h, o)
{
var offset = o.offset();
if(offset.top > h){
$(this).scrollTop(offset.top – h);
}else{
if(offset.top < 25){ //项的高度 对应样式表 td height:25px
$(this).scrollTop(0);
}
}
}
})(jQuery);

/*
* @date: 2010-5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
*/
(function($) {
$.fn.autopoint = function (options) {
defaults = {
url:options.url,
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS : ‘jhover’,//提示框列表鼠标悬浮的样式
tpl : ‘<div class=”list”><div
class=”word”>{word}</div><div
class=”view”>约{view}条记录</div></div>’,
topoffset:options.topoffset||5
};
var options = $.extend(defaults, options);
var dropDiv =
$(‘<div></div>’).addClass(‘dropDiv’).appendTo(‘body’);
var isOver = false;
dropDiv.hover(function(){
isOver = true;
}, function(){
isOver = false;
});
return this.each(function(){
var pa = $(this);
$(this).bind(‘keydown’, function(event){
if (dropDiv.css(‘display’) != ‘none’)
{//当提示层显示时才对键盘事件处理
var currentList = dropDiv.find(‘.’ + options.listHoverCSS);
if (event.keyCode == options.keyDown) {//如果按的是向下方向键
if (currentList.length == 0) {
//如果提示列表没有一个被选中,则将列表第一个选中
$(this).val(getPointWord(dropDiv.find(‘.list:first’)
.mouseover()));
} else if (currentList.next().length == 0) {
//如果是最后一个被选中,则取消选中,即可认为是输入框被选中
unHoverAll();
} else {
unHoverAll();
//将原先选中列的下一列选中
if (currentList.next().length != 0)
$(this).val(getPointWord(currentList.next()
.mouseover()));
}
return false;
} else if (event.keyCode == options.keyUp) {//如果按的是向上方向键
if (currentList.length == 0) {
$(this).val(getPointWord(dropDiv.find(‘.list:last’)
.mouseover()));
} else if (currentList.prev().length == 0) {
unHoverAll();
} else {
unHoverAll();
if (currentList.prev().length != 0)
$(this).val(getPointWord(currentList.prev()
.mouseover()));
}
return false;
}else if(event.keyCode == options.keyEnter) dropDiv.empty().hide();
}
//当按下键之前记录输入框值,以方便查看键弹起时值有没有变
$(this).attr(‘alt’, $(this).val());
}).bind(‘keyup’, function(event){
//如果弹起的键是向上或向下方向键则返回
if(event.keyCode == options.keyDown||event.keyCode == options.keyUp)
return;
if($(this).val() == ”){
dropDiv.empty().hide();
return;
}
//若输入框值没有改变或变为空则返回
if ($(this).val() == $(this).attr(‘alt’))
return;
getData(pa, $(this).val());
}).bind(‘blur’, function(){
if(isOver&&dropDiv.find(‘.’ + options.listHoverCSS)!=0) return;
//文本输入框失去焦点则清空并隐藏提示层
dropDiv.empty().hide();
});
/**处理ajax返回成功的方法**/
handleResponse = function(parent, json) {
var isEmpty = true;
for(var o in json){
if(o == ‘data’) isEmpty = false;
}
if(isEmpty) {
showError(“返回数据格式错误,请检查请求URL是否正确!”);
return;
}
if(json[‘data’].length == 0) {
//返回数据为空
return;
}
refreshDropDiv(parent, json);
dropDiv.show();
}
/**处理ajax失败的方法**/
handleError = function(error) {
//showError(“由于url错误或超时请求失败!”);
}
showError = function(error){
alert(error);
}
/**通过ajax返回json格式数据生成用来创建dom的字符串**/
render = function(parent, json) {
var res = json[‘data’] || json;
var appendStr = ”;
//用json对象中内容替换模版字符串中匹配/\{([a-z]+)\}/ig的内容,如{word},{view}
for ( var i = 0; i < res.length; i+=1) {
appendStr += options.tpl.replace(/\{([a-z]+)\}/ig, function(m, n)
{
return res[i][n];
});
}
jebind(parent, appendStr);
}
/**将新建dom对象插入到提示框中,并重新绑定mouseover事件监听**/
jebind = function(parent, a) {
dropDiv.append(a);
dropDiv.find(‘.list’).each(function() {
$(this).unbind(‘mouseover’).mouseover(function() {
unHoverAll();
$(this).addClass(options.listHoverCSS);
}).unbind(‘click’).click(function(){
parent.val(getPointWord($(this)));
dropDiv.empty().hide();
parent.focus();
});
});
}
/**将提示框中所有列的hover样式去掉**/
unHoverAll = function() {
dropDiv.find(‘.list’).each(function() {
$(this).removeClass(options.listHoverCSS);
});
}
/**在提示框中取得当前选中的提示关键字**/
getPointWord = function(p) {
return p.find(‘div:first’).text()
}
/**刷新提示框,并设定样式**/
refreshDropDiv = function(parent, json) {
var left = parent.offset().left;
var height = parent.height();
var top = parent.offset().top + options.topoffset + height;
var width = options.width || parent.width() + ‘px’;
dropDiv.empty();
dropDiv.css( {
‘border’ : ‘1px solid #FE00DF’,
‘left’ : left,
‘top’ : top,
‘width’ : width
});
render(parent, json);
//防止ajax返回之前输入框失去焦点导致提示框不消失
parent.focus();
}
/**通过ajax向服务器请求数据**/
getData = function(parent, word) {
$.ajax( {
type : ‘GET’,
data : “word=”+ word,
url : options.url,
dataType : ‘json’,
timeout : 1000,
success : function(json){handleResponse(parent, json);},
error : handleError
});
}
});
}
})(jQuery);

复制代码 代码如下:

网页上主要样式:

#autoComplete_Group {
border: 1px solid #817F82;
position: absolute;
overflow-y:auto;
overflow-x:hidden;
display:none;
}
#autoComplete_Group table {
background: none repeat scroll 0 0 #FFFFFF;
cursor: default;
width: 100%;
}
#autoComplete_Group td {
color: #000000;
font: 14px/25px arial;
height: 25px;
padding: 0 8px;
}
#autoComplete_Group .nowRow {
background-color:#EBEBEB;
}

复制代码 代码如下:

复制代码 代码如下:

<style type=”text/css”>
.dropDiv {
position: absolute;
z-index: 10;
display: none;
cursor: hand;
}
.dropDiv .jhover {
background-color: #00FEDF;
}
.dropDiv .list {
float:left;
width:100%;
}
.dropDiv .word {
float:left;
}
.dropDiv .view {
float:right;
color: gray;
text-align: right;
font-size: 10pt;
}
</style>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head runat=”server”>
<title>jQuery 仿百度提示框</title>
<script src=”/js/jquery.js”
type=”text/javascript”></script>
<link href=”/js/autoComplete/autoComplete.css” rel=”stylesheet”
type=”text/css” />
<script src=”/js/autoComplete/jquery.autoComplete.js”
type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function(){
$(“#txt_company”).autoComplete({ url:”ajax.aspx” });
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<input id=”txt_company” type=”text” style=”width:468px;” />
</form>
</body>
</html>

调用方法:

复制代码 代码如下:

复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
string keyword = Request[“txt_company”];
string jsonArray =
“[{\”text\”:\”天天有限公司\”,\”value\”:\”2\”},{\”text\”:\”明明有限公司\”,\”value\”:\”4\”},{\”text\”:\”黄黄有限公司\”,\”value\”:\”4\”}]”;
Response.Write(jsonArray);
Response.End();
}

<script type=”text/javascript”
src=”../js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”../js/autopoint-1.0.1.js”></script>
<script type=”text/javascript”>
$(function(){
  $(“input”).autopoint({url:’);
});
</script>
<body>
  <input type=”text” size=”50″ />
  <input type=”text” size=”50″ />
</body>

后台只需要返回json格式的 text 和 value值 就可以了。
$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器
append到另一个容器 事件丢失了,
append完可以使用该方法重新绑定事件。下面还有一些参数。

servlet主要部分:

复制代码 代码如下:

复制代码 代码如下:

var defaults = {
width: c.width(), //提示框的宽度 默认跟文本框一样
maxheight: 150, //提示框的最大高度
top: 6, //与文本框的上下距离
url: “”, //ajax 请求地址
type: “post”, //ajax 请求类型
async: false, //是否异步请求
autoLength: 0, //文本长度大于0 就请求服务器
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行
clearValue: function(){ }, //当重新请求时清空Value值
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行
};

response.setContentType(“text/html”);
response.setHeader(“Cache-Control”, “no-cache”);
response.setCharacterEncoding(“UTF-8”);
String word = request.getParameter(“word”);
if(Utils.isBlank(word)) return;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put(“word”, word + “a1”);
map1.put(“view”, 10);
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put(“word”, word + “a2”);
map2.put(“view”, 15);
Map<String, Object> map3 = new HashMap<String, Object>();
map3.put(“word”, word + “a3”);
map3.put(“view”, 2);
array.add(JSONObject.fromObject(map1));
array.add(JSONObject.fromObject(map2));
array.add(JSONObject.fromObject(map3));
json.put(“data”, array);
PrintWriter out = response.getWriter();
out.print(json.toString());
out.close();

好了。 唯一一个缺点就是 鼠标点击项的时候
不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~

其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为
从数据源查取数据.

您可能感兴趣的文章:

  • 使用 Vue.js
    仿百度搜索框的实例代码
  • 百度搜索框智能提示案例jsonp
  • 利用jsonp跨域调用百度js实现搜索框智能提示
  • JS实现仿google、百度搜索框输入信息智能提示的实现方法
  • jQuery搜索框效果实现代码(百度关键词联想)
  • 基于jquery的仿百度搜索框效果代码
  • 基于JavaScript实现百度搜索框效果

您可能感兴趣的文章:

  • 基于jquery实现的类似百度搜索的输入框自动完成功能
  • Jquery带搜索框的下拉菜单
  • 基于jquery的仿百度搜索框效果代码
  • Jquery实现搜索框提示功能示例代码
  • 基于jQuery实现搜索关键字自动匹配功能
  • jQuery搜索同辈元素方法
  • JQuery+JS实现仿百度搜索结果中关键字变色效果
  • jquery
    ztree实现模糊搜索功能
  • jquery创建一个ajax关键词数据搜索实现思路
  • jquery+php实现搜索框自动提示
  • jQuery实现的简单前端搜索功能示例

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注