今天做一个有点复杂的jQuery插件,文本框自动提示插件,之所以说有点复杂,是因为这个插件涉及到了传参数和回调函数,其他的都和之前做的插件差不多,好了,直接进入正题,首先我们新建一个js文件,MyAutoComplete.js和一个css文件,MyAutoComplete.css,打开MyAutoComplete.js,还是先写好jQuery插件的标准代码框架,如下所示:
(function ($) {
$.fn.MyAutoComplete= function (params) {
//此处写插件核心代码
return this;
}
$.fn.MyAutoComplete.DefaultParams = {
width: $(this).width(),
data: null,
callback: null
}
})(jQuery)
这个插件比其他的复杂的地方大家应该已经看出来了,是的,这个插件可以带参数了,究竟要传什么参数呢?这里我们自定义了一组默认的参数,就是$.fn.MyAutoComplete.DefaultParams里的键值对,我们看到有三个参数,width、data和callback,width表示自动提示框的宽度,默认是当前调用对象的宽度,data表示自动提示的所有值(目前只支持数组格式,有兴趣的可以继续扩展),callback表示回调函数。
好了,现在开始写插件核心代码,首先我们把用户传过来的参数和默认参数合并,如下所示;
$.extend($.fn.MyAutoComplete.DefaultParams, params);
然后,我们在页面body标签内添加一个div,这个div就是自动提示框,如下所示:
$("body").append("<div id='MyAutoComplete' class='Myautocomplete-layout'></div>");
好了,现在我们需要自动提示的文本框做处理,当用户输入信息后,要展示自动提示框,自动提示框里放置匹配的值,如下所示;
var $this = $(this);
this.keyup(function () {
var text = $this.val();
var data = $.fn.MyAutoComplete.DefaultParams.data;
var rightData = [];
$.each(data, function (index, item) {
if (item.indexOf(text) > -1) {
rightData.push(item);
}
});
$("#MyAutoComplete").width($.fn.MyAutoComplete.DefaultParams.width);
$("#MyAutoComplete").css("left", $this.offset().left);
$("#MyAutoComplete").css("top", $this.offset().top + $this.height());
MyFunctions.makeContAndShow(rightData);
});
上面代码中,我们遍历data数组,把数组里面包含用户输入的值的项全部放入另一个数组rightData,然后我们把自动提示框的宽度设置成传入的宽度值,把自动提示框的left和top设置一下,这样就能保证自动提示框始终位于文本框的下方,接着我们调用了makeContAndShow()这个函数,这个函数主要是把rightData数组中的值放入一个table元素中,然后把table元素加入到自动提示框内,如下所示:
var MyFunctions = {
makeContAndShow: function (data) {
if (data == null || data.length <= 0) {
return;
}
else {
var table = "<table><tbody>";
$.each(data, function (index, item) {
table += "<tr><td><div>" + item + "</div></td></tr>";
});
table += "</tbody></table>";
$("#MyAutoComplete").html(table);
$("#MyAutoComplete").show();
}
}
};
代码写到这边,已经基本实现自动提示的功能了,但还不够,我们需要让用户可以滑动鼠标选择提示框内的值并在文本框中展示,代码如下:
//鼠标滑动
$("#MyAutoComplete").delegate("tr", "mouseover", function () {
$("#MyAutoComplete tr").removeClass("ct");
$(this).addClass("ct");
}).delegate("tr", "mouseout", function () {
$("#MyAutoComplete tr").removeClass("ct");
}).click(function () {
$this.val($("#MyAutoComplete").find(".ct").text());
$("#MyAutoComplete").hide();
$.fn.MyAutoComplete.DefaultParams.callback($this.val());
});
如上所示,我们给table中的tr添加mouseover事件,鼠标移上时给当前tr添加ct样式,高亮当前行,鼠标移出时移除ct样式,鼠标点击时,根据ct样式找到那一行然后获取该行的text值传到文本框中,然后隐藏提示框,最后,我们把选中的值传到回调函数,这样使用插件的时候,我们就可以从回调函数中获取用户选择的值。
最后,我们还需要设置当用户点击页面其他区域时自动隐藏提示框,代码如下:
$("#document").bind("click",function(){
$("#MyAutoComplete").hide();
});
好了,插件代码已经全部写好,下面我们在html页面上测试一下,页面前台调用代码:
<script type="text/javascript">
$(function () {
var data = ["中国好声音", "中国移动网上营业厅", "中国银行", "中国移动", "中国好声音第三期", "中国好声音 第一期", "中国电信网上营业厅", "中国工商银行", "中国好声音第二期", "中国地图"];
$("#textbox1").MyAutocomplete({ width: 200, data: data, callback: function (data) {
alert(data);
}
});
})
</script>
data可以通过ajax方式从后台获取,这里为了演示就直接写在前台,执行效果如下:
选中某条记录并点击,回调函数执行,效果如下:
需要全部代码的童鞋可以留下邮箱~~