以下是代码 分享给大家
<!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>
<title></title>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
.j_prompt_select
{
width: 350px;
z-index:100;
border: #7f9db9 1px solid;
background: #fff;
font-size: 12px;
font-family: 微软雅黑;
line-height: 15px;
color: #0055aa;
display: none;
position:absolute;
}
.j_prompt_select .j_prompt_header
{
height:20px;
padding:8px;
}
.j_prompt_select ul
{
margin: 0px 0px;
padding: 0;
list-style: none;
}
.j_prompt_select ul li
{
padding: 7px 6px;
line-height: 18px;
height: 18px;
}
.j_prompt_select .select
{
background-color: #e8f4ff;
}
.j_prompt_select ul li .last
{
float: right;
}
.j_prompt_select ul li .first
{
float: left;
}
.j_prompt_select ul li:hover, .j_prompt_select .selected
{
background-color: #e8f4ff;
border-top: #7e9db9 1px solid;
border-bottom: #7e9db9 1px solid;
padding: 6px 5px;
cursor: pointer;
}
.j_prompt_select .pager
{
text-align: center;
width: 345px;
line-height: 23px;
font-size: 15px;
}
.j_prompt_select .pager a
{
padding: 5px 5px;
color: #0055b9;
}
.j_prompt_select .pager .current
{
text-decoration: none;
color: Black;
}
</style>
<script type="text/javascript" language="javascript">
String.prototype.trimStart = function (trimStr) {
if (!trimStr) { return this; }
var temp = this;
while (true) {
if (temp.substr(0, trimStr.length) != trimStr) {
break;
}
temp = temp.substr(trimStr.length);
}
return temp;
};
String.prototype.trimEnd = function (trimStr) {
if (!trimStr) { return this; }
var temp = this;
while (true) {
if (temp.substr(temp.length - trimStr.length, trimStr.length) != trimStr) {
break;
}
temp = temp.substr(0, temp.length - trimStr.length);
}
return temp;
};
String.prototype.StartWith = function (str) {
var me = this;
if (str == null || str == "" || me.length == 0 || str.length > me.length)
return false;
if (me.substr(0, str.length) == str) {
return true;
} else
return false;
return true;
}
var dataSource = "@@Beiji|北极|bj@@Beijing|北京|bj@@beiji|背脊|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Beijing|北京|bj@@Shennongjia|神农架|HPG@@Shashi|沙市|SHS@@Tianjing|天津|TJ@@hunan|湖南市|hn@@hainan|海南|hn@@guizhou|贵州|gz@@taizhou|台州|TZ@@taizhou|泰州|tz@@";
var CONST_Prompt = "";
(function ($) {
$.extend({
//绑定键盘上下左右确认事件
Prompt_Keyboard_Bind: function (opts) {
opts = $.extend({
dataSource: "", //数据源
config: {
nameIndex: 1, //显示的文本
shortNameIndex: 0, //显示的文本简称
idIndex: 2 //id标识
},
pageSize: 5,
callerId: "", //调用文本ID
promptId: "j_prompt_address" //控件ID
}, opts || {});
$(document).keydown(function (e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) {
code = e.keyCode;
} else if (e.which) {
code = e.which;
}
if (code == 38) {
movePrev();
}
if (code == 40) {
moveNext();
}
if (code == 37) {
moveLeft();
}
if (code == 39) {
moveRight();
}
if (code == 13) {
setText();
}
});
var movePrev = function () {
var index = $("#" + opts.promptId + " li.selected").prevAll().length;
if (index == 0) { $("#" + opts.promptId + " li").removeClass('selected').eq($("#" + opts.promptId + " li").length - 1).addClass('selected'); }
else { $("#" + opts.promptId + " li").removeClass('selected').eq(index - 1).addClass('selected'); }
}
var moveNext = function () {
var index = $("#" + opts.promptId + " li.selected").prevAll().length;
if (index == $("#" + opts.promptId + " li").length - 1) { $("#" + opts.promptId + " li").removeClass('selected').eq(0).addClass('selected'); }
else { $("#" + opts.promptId + " li").removeClass('selected').eq(index + 1).addClass('selected'); }
}
var moveLeft = function () {
var curPage = $("#" + opts.promptId + " .pager .current").data("page");
if (curPage == 1) { return; }
$("#" + opts.callerId).Prompt_Init({ dataSource: opts.dataSource, currentPage: (curPage - 1) });
}
var moveRight = function () {
var curPage = $("#" + opts.promptId + " .pager .current").data("page");
//总条数
var totalCount, content = $("#" + opts.callerId).val();
//将数据源中的数据进行筛选
var newData = $.Prompt_Filter(opts, content);
totalCount = newData.length;
//总页数
var pageNum = totalCount % opts.pageSize == 0 ? parseInt(totalCount / opts.pageSize) : parseInt((totalCount / opts.pageSize) + 1);
if (curPage == pageNum) { return; }
$("#" + opts.callerId).Prompt_Init({ dataSource: opts.dataSource, currentPage: (curPage + 1) });
}
var setText = function () {
var lineCol = $("#" + opts.promptId + " .selected").attr("data").split('|');
$("#" + opts.callerId).attr("j_prompt_id", lineCol[opts.config.idIndex]).attr("j_prompt_shortname", lineCol[opts.config.shortNameIndex]).val(lineCol[opts.config.nameIndex]);
CONST_Prompt = lineCol[opts.config.nameIndex];
$("#" + opts.promptId).hide();
}
},
//数据过滤
Prompt_Filter: function(opts, content){
var retData = [];
var isArray = (typeof (opts.dataSource == 'object') && opts.dataSource.constructor == Array);
if (!isArray) {
var lineRow = opts.dataSource.trimStart("@@").trimEnd("@@").split('@@'), lineCol, txtRow;
var totalCount = lineRow.length;
for (var i = 0; i < totalCount; i++) {
txtRow = lineRow[i];
if (txtRow.length == 0) { continue; }
lineCol = txtRow.split('|');
id = lineCol[opts.config.idIndex].toLowerCase();
name = lineCol[opts.config.nameIndex].toLowerCase();
shortname = lineCol[opts.config.shortNameIndex].toLowerCase();
if (id.StartWith(content.toLowerCase()) || name.StartWith(content.toLowerCase()) || shortname.StartWith(content.toLowerCase())) {
retData.push(txtRow);
}
}
} else {
retData = opts.dataSource;
}
return retData;
}
});
$.fn.extend({
//延迟加载
delay: function (callBack, ms) {
var timer = 0;
return (function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
})(callBack, ms);
},
//分页绑定
Prompt_Pager_Bind: function (opts) {
var me = this;
$("#" + opts.promptId + " a").live("click", function () {
var self = $(this);
$("#" + opts.promptId).Prompt_Init({ dataSource: opts.dataSource, currentPage: $(self).data("page") });
});
$("#" + opts.promptId + " li").live("click", function () {
var self = this;
var lineCol = $(self).attr("data").split('|');
$(me).attr("j_prompt_id", lineCol[opts.config.idIndex]).attr("j_prompt_shortname", lineCol[opts.config.shortNameIndex]).val(lineCol[opts.config.nameIndex]);
$("#" + opts.promptId).hide();
});
},
Prompt_Init: function (opts) {
opts = $.extend({
dataSource: "", //数据源
config: {
nameIndex: 1, //显示的文本
shortNameIndex: 0, //显示的文本简称
idIndex: 2, //id标识
left: 0,
top: 20
},
currentPage: 1, //当前页
showPage: 2, //当前页前后保留页数
pageSize: 5, //每页条数
promptId: "j_prompt_address" //控件ID
}, opts || {});
var me = this;
//var isArray = (typeof (opts.dataSource == 'object') && opts.dataSource.constructor == Array);
//获取输入的内容
var content = $.trim($(me).val());
//装载htm
if ($("#" + opts.promptId).html() == null) {
var $promptHtm = "<div id=\"" + opts.promptId + "\" class=\"j_prompt_select\"><div class=\"j_prompt_header\"></div><ul></ul></div>";
$("body").append($promptHtm);
}
var _div = "", txtRow, name, shortname, id;
//总条数
var totalCount;
//将数据源中的数据进行筛选
var newData = $.Prompt_Filter(opts, content);
// if (!isArray) {
// var lineRow = opts.dataSource.trimStart("@@").trimEnd("@@").split('@@'), lineCol;
// totalCount = lineRow.length;
// for (var i = 0; i < totalCount; i++) {
// txtRow = lineRow[i];
// if (txtRow.length == 0) { continue; }
// lineCol = txtRow.split('|');
// id = lineCol[opts.config.idIndex].toLowerCase();
// name = lineCol[opts.config.nameIndex].toLowerCase();
// shortname = lineCol[opts.config.shortNameIndex].toLowerCase();
// if (id.StartWith(content.toLowerCase()) || name.StartWith(content.toLowerCase()) || shortname.StartWith(content.toLowerCase())) {
// newData.push(txtRow);
// }
// }
// } else {
// newData = opts.dataSource;
// }
if (newData.length > 0) {
$("#" + opts.promptId + " .j_prompt_header").html(content + ",按拼音排序");
$("#" + opts.promptId).slideDown(300);
} else {
$("#" + opts.promptId + " .j_prompt_header").html("对不起,找不到:" + content); return;
}
var htmUl = $("#" + opts.promptId + " ul");
totalCount = newData.length;
//数据开始位置
var start = ((opts.currentPage - 1) * opts.pageSize);
//显示的数据
var showCount = totalCount < opts.pageSize + start ? totalCount : opts.pageSize + start;
opts.dataSource = newData;
htmUl.html("");
for (var i = start; i < showCount; i++) {
//每行的数据
txtRow = newData[i];
if (txtRow.length == 0) { continue; }
lineCol = txtRow.split('|');
name = lineCol[opts.config.nameIndex];
shortname = lineCol[opts.config.shortNameIndex];
className = i === start ? "selected" : "";
if (shortname.length == 0) {
_div += "<li data=" + txtRow + " class=\"" + className + "\"><span class=\"first\">" + name + "</span></li>";
} else {
_div += "<li data=" + txtRow + " class=\"" + className + "\"><span class=\"first\">" + name + "</span><span class=\"last\">" + shortname + "</span></li>";
}
}
//总页数
var pageNum = totalCount % opts.pageSize == 0 ? parseInt(totalCount / opts.pageSize) : parseInt((totalCount / opts.pageSize) + 1),
className = "";
_div += "<div class=\"pager\">";
if (opts.currentPage != 1 && pageNum > 1) {
_div += "<a data-page=\"" + (opts.currentPage - 1) + "\" href=\"javascript:\"><-</a>";
}
var ary = [];
if (opts.showPage > 1) {
for (var i = 0; i < opts.showPage; i++) {
ary.push(i + 1);
}
}
for (var i = 1; i <= pageNum; i++) {
className = i === opts.currentPage ? "current" : "";
if (className.length == 0) {
if (ary.length > 0) {
for (var j = 0; j < ary.length; j++) {
if (opts.currentPage + ary[j] == i || opts.currentPage - ary[j] == i) {
_div += "<a data-page=\"" + i + "\" href=\"javascript:\">" + i + "</a>";
}
}
}
} else {
_div += "<a data-page=\"" + i + "\" class=\"" + className + "\">" + i + "</a>";
}
}
if (pageNum != 1 && opts.currentPage != pageNum) {
_div += "<a data-page=\"" + (opts.currentPage + 1) + "\" href=\"javascript:\">-></a>";
}
_div += " </div>";
$(htmUl).html(_div);
//设置控件显示位置
var X = $(me).offset().top;
var Y = $(me).offset().left;
$("#" + opts.promptId).css({ "position": "absolute", "top": X + opts.config.top, "left": Y + opts.config.left });
$("#console").html("X:" + X + " Y:" + Y);
$(me).Prompt_Pager_Bind(opts);
}
});
})($);
$(function () {
$("#txtAddress").keyup(function () {
var me = $(this);
//检测当前内容是否发生改变
if (CONST_Prompt != me.val()) {
CONST_Prompt = me.val();
//延迟0.3秒载入 可以去掉
me.delay(function () {
me.Prompt_Init({ dataSource: dataSource });
}, 300);
}
});
//绑定键盘左右分页上下筛选 回车选中事件
$.Prompt_Keyboard_Bind({ callerId: "txtAddress", dataSource: dataSource });
});
</script>
</head>
<body>
<input type="text" id="txtAddress" />
<div id="console">
</div>
</body>
</html>