基于jQuery打造智能的人员选择输入框

核心提示： 接着我们来一步一步来分析我的实现，开始还是编写jQuery控件的“模板”,关于为什么要这么写，基于jQuery打造智能的人员选择输入框(4)，请参考这篇的说明1.;(function($){2.if(!$.Autocompleter){3.alert("请先引用

接着我们来一步一步来分析我的实现，开始还是编写jQuery控件的“模板”,关于为什么要这么写，请参考这篇的说明

1.;　(function($)　{
2.　　　　if　(!$.Autocompleter)　{
3.　　　　　　　　alert("请先引用jquery.autocomplete.js");
4.　　　　　　　　return;
5.　　　　}
6.　　　$.fn.usbox　=　function(o)　{
7.　　　}
8.})(jQuery)

这次加了一个判断，因为我们这个控件是依赖于autocomplete的,如果你看了前两篇，那么就一定知道接着就是编写默认参数

1.var　def　=　{
2.　　　　　　　　urlOrData:false,//必须！请求数据的url和或者直接是数据，格式参考autocomplete的说明
3.　　　　　　　　width:　"90%",　//宽度
4.　　　　　　　　addItem:　false,//当从下拉选项中选择一个人员后触发的函数
5.　　　　　　　　removeItem:　false,//当从已选择的人员删除一个人时触发的函数
6.　　　　　　　　clickItem:　function()　{　},//点击人员小方块时触发的时间
7.　　　　　　　　completeOp:　{}//autocomplete的参数，格式参考它自身的说明
8.　　　　};

参数也是比较简单,添加和移除的两个函数比较重要,在demo中会讲到,autocomplete的参数因为太多,大家只有自己参考一下官方的说明, 默认不管也可以,因为我会给大家默认来一下.

1.$.extend(def,　o);
2.//这才是默认的Complete的参数
3.　var　co　=　$.extend({　scroll:　false,　formatItem:　function(row,　i,　max)　{　return　row[0]　+　"["　+　row[1]　+　"]";　}　},　def.completeOp);
4.//定义小方块的模板，其中s.gif是个空图片，位置可根据实际情况进行调整
5.　　var　temp　=　"<div　class="bbit-usbox-item"><a　href="javascript:void(0);"><span>${text}</span><input　value="${value}"　type="hidden"><img　class="bbit-usbox-del"　alt="点击删除"　src="../Themes/Shared/images/s.gif"></a></div>";