jQuery 插件仿百度搜索框智能提示(带Value值)_Javascript教程-查字典教程网
jQuery 插件仿百度搜索框智能提示(带Value值)
jQuery 插件仿百度搜索框智能提示(带Value值)
发布时间:2016-12-30 来源:查字典编辑
摘要:因公司需要做一个仿百度搜索框,并且带Value值的,网上找了下只有Text,都没带Value的所以做了个.直接贴代码。复制代码代码如下:(f...

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

直接贴代码。

复制代码 代码如下:

(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 />');

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);

复制代码 代码如下:

#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;

}

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>jQuery 仿百度提示框</title>

<script src="http://www.jb51.netjs/jquery.js" type="text/javascript"></script>

<link href="/js/autoComplete/autoComplete.css" rel="stylesheet" type="text/css" />

<script src="http://www.jb51.netjs/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" />

</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();

}

后台只需要返回json格式的 text 和 value值 就可以了。

$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器 append到另一个容器 事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。

复制代码 代码如下:

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){ } //当回车 或 鼠标点击选中值的时候执行

};

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类