模仿写一个listbox的功能, 这里只完成部分的功能. 因为完整的应该是与服务端交互, 根据搜索的关键进行匹配. 然后可以利用键盘 或者 鼠标来选择推荐出来的内容. 这里只实现选择的功能. 只要是JS部分的代码.
第一步: CSS代码
.ac-renderer {
width: 600px;
top: 33px;
left: 1px;
position: absolute;
top: 35px;
left: 1px;
z-index: 10;
background: #fff;
border: solid 1px #999\0;
border: 0 none rgba(0,0,0,0);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.5);
box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ac-row {
cursor: pointer;
padding: 8px;
zoom: 1;
clear: both;
}
.ac-renderer>.ac-row:first-child {
border-radius: 5px 5px 0 0;
}
.ac-active {
background-color: #d6e9f8;
}
.ac-row .zm-item-img-avatar {
margin: 2px 10px 0 0;
width: 25px;
height: 25px;
}
.zm-item-img-avatar {
border-radius: 2px;
}
.zg-left {
float: left;
}
.autocomplete-row-name {
margin: 0 0 1px 35px;
display: block;
line-height: 1.2;
height: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zu-autocomplete-row-description {
color: #999;
display: block;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 14px;
height: 14px;
zoom: 1;
}
第二步: 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../../main/js/global/jquery/1.8/jquery-1.8.1.js"></script>
<script src="../../../main/plugin/listbox/jquery.listbox.js"></script>
<link rel="stylesheet" href="../../../main/plugin/listbox/listbox.css"/>
</head>
<body>
<center>
<div>
<input id="box" type="text" value="" placeholder="输入关键字"/>
</div>
</center>
<script>
var this$ = $(‘#box‘);
var html = [
‘<div class="ac-row ac-active active" id=":3g" role="option" style="-webkit-user-select: none;">‘,
‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘,
‘<span title="足球" style="-webkit-user-select: none;">足球1111</span>‘,
‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘,
‘又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注‘,
‘</span>‘,
‘</div>‘,
‘<div id=":4g" role="option" style="-webkit-user-select: none;">‘,
‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘,
‘<span title="足球" style="-webkit-user-select: none;">足球22222</span>‘,
‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘,
‘又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注‘,
‘</span>‘,
‘</div>‘,
‘<div id=":5g" role="option" style="-webkit-user-select: none;">‘,
‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘,
‘<span title="足球" style="-webkit-user-select: none;">足球33333</span>‘,
‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘,
‘又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注‘,
‘</span>‘,
‘</div>‘
].join(‘‘);
var options = {
width: 300,
bodyHtml: html,
target: this$,
targetWrap: this$.parent(),
afterSelected: function (value) {
alert(value.html());
}
};
var listBoxUtil = new ListBoxUtil(options);
listBoxUtil.init();
</script>
</body>
</html>
第三步: 核心JS代码
(function ($) {
ListBoxUtil = function (options) {
this.options = options || {};
this.target = null;
this.targetWrap = null;
this.width = 600;
this.top = 0;
this.left = 0;
this.id = "listbox";
this.bodyHtml = "";
this.currentIndex = 0;
this.callFunction = null;
var html = [
‘<div class="ac-renderer" role="listbox" id="‘ + this.id + ‘" style="-webkit-user-select: none;">‘,
‘</div>‘
].join(‘‘);
this.listbox = $(html);
};
ListBoxUtil.prototype.init = function () {
var this$ = this;
this$.setConfig();
this$.mouseHover();
this$.keyup();
this$.bindClick();
this$.target.on(‘focus‘, function () {
this$.show();
}).on(‘blur‘, function () {
setTimeout(function () {
this$.hide()
}, 150);
});
};
ListBoxUtil.prototype.setConfig = function () {
if (this.options != null) {
if (this.options[‘target‘]) {
this.target = this.options[‘target‘];
}
if (this.options[‘targetWrap‘]) {
this.targetWrap = this.options[‘targetWrap‘];
}
if (this.options[‘width‘]) {
this.listbox.width(this.options[‘width‘]);
}
if (this.options[‘bodyHtml‘]) {
this.listbox.append(this.options[‘bodyHtml‘]);
}
if (this.options[‘left‘]) {
this.listbox.left(this.options[‘left‘]);
} else {
this.listbox.css("left", this.target.offset().left);
}
if (this.options[‘top‘]) {
this.listbox.top(this.options[‘top‘]);
} else {
this.listbox.css("top", this.target.offset().top + this.target.height() + 10);
}
if (this.options[‘callFunction‘]) {
this.callFunction = this.options[‘callFunction‘];
}
this.targetWrap.append(this.listbox);
}
};
ListBoxUtil.prototype.mouseHover = function () {
var this$ = this;
this.listbox.children().hover(
function () {
this$.listbox.children().removeClass(‘ac-active active‘);
$(this).addClass("ac-active active");
//
}
);
};
ListBoxUtil.prototype.keyMove = function (e) {
var listChild = this.listbox.children().removeClass("ac-active active");
// 向上
if (e.keyCode == 38) {
if (this.currentIndex > 0) {
this.currentIndex--;
} else {
this.currentIndex = listChild.length - 1;
}
}
// 向下
else if (e.keyCode == 40) {
if (this.currentIndex == listChild.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
}
listChild.eq(this.currentIndex).addClass("ac-active active");
};
ListBoxUtil.prototype.hide = function () {
this.listbox.hide();
};
ListBoxUtil.prototype.show = function () {
this.listbox.show();
};
ListBoxUtil.prototype.bindClick = function () {
var this$ = this;
this$.listbox.children().on(‘click‘, function () {
if (this$.options.afterSelected) {
this$.options.afterSelected($(this));
}
});
};
ListBoxUtil.prototype.enter = function (e) {
var this$ = this;
var curentChild = this$.listbox.children().eq(this$.currentIndex);
if (this$.options.afterSelected) {
this$.options.afterSelected(curentChild);
}
};
ListBoxUtil.prototype.keyup = function () {
var this$ = this;
this.target.on(‘keyup‘, function (e) {
if (e.keyCode == 38 || e.keyCode == 40) {
this$.keyMove(e);
} else if (e.keyCode == 13) {
this$.enter(e);
}
});
};
})(jQuery);
效果图:
虽然代码非常的简单, 但也是我第一次这么认真的写JS代码. 以后还是得前后坚固才行.