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

核心提示： 本例中只有使用一个图片.第二 开始编写Javascript还是老规矩，先来个完整代码，基于jQuery打造智能的人员选择输入框(3)，非常简单只有不到70行代码01.;(function($){02.if(!$.Autocompleter){03.alert("请先引用jquery.a

本例中只有使用一个图片.

第二 开始编写Javascript

还是老规矩，先来个完整代码，非常简单只有不到70行代码

01.;　(function($)　{
02.　　　　if　(!$.Autocompleter)　{
03.　　　　　　　　alert("请先引用jquery.autocomplete.js");
04.　　　　　　　　return;
05.　　　　}
06.　　　　$.fn.usbox　=　function(o)　{
07.　　　　　　　　var　def　=　{
08.　　　　　　　　　　　　urlOrData:　"ResponseAutoComplete.ashx",
09.　　　　　　　　　　　　width:　"90%",　//宽度
10.　　　　　　　　　　　　addItem:　false,
11.　　　　　　　　　　　　removeItem:　false,
12.　　　　　　　　　　　　clickItem:　function()　{　},
13.　　　　　　　　　　　　completeOp:　{}
14.　　　　　　　　};
15.　　　　　　　　$.extend(def,　o);
16.　　　　　　　　var　co　=　$.extend({　scroll:　false,　formatItem:　function(row,　i,　max)　{　return　row[0]　+　"["　+　row[1]　+　"]";　}　},　def.completeOp);
17.　
18.　　　　　　　　var　temp　=　"<div　class='bbit-usbox-item'><a　href='javascript:void(0);'><span>${text}</span><input　type='hidden'　value='${value}'/><img　src='../Themes/Shared/images/s.gif'　alt='点击删除'　class='bbit-usbox-del'/></a></div>";
19.　
20.　　　　　　　　return　this.each(function(e)　{
21.　　　　　　　　　　　　var　me　=　$(this);
22.　　　　　　　　　　　　var　id　=　me.attr("id");
23.　　　　　　　　　　　　if　(id　==　null　||　id　==　"")　{
24.　　　　　　　　　　　　　　　　id　=　"usbox_"　+　new　Date().getTime();
25.　　　　　　　　　　　　}
26.　　　　　　　　　　　　var　inc　=　$("<div　class='bbit-usbox-boxc'/>");
27.　　　　　　　　　　　　var　input　=　$("<input　type='text'　id='"　+　id　+　"_inbox'　class='bbit-usbox-box'　/>").appendTo(inc);
28.　　　　　　　　　　　　me.addClass("bbit-usbox").width(def.width).append(inc);
29.　　　　　　　　　　　　input.autocomplete(def.urlOrData,　co).result(function(event,　data,　formatted)　{
30.　　　　　　　　　　　　　　　　$(this).val("");
31.　　　　　　　　　　　　　　　　additem(this,　data);
32.　　　　　　　　　　　　});
33.　　　　　　　　　　　　me.bind("addboxitem",　function(e,data)　{　additem(input,data);　});
34.　　　　　　　　　　　　function　additem(inc,　data)　{
35.　　　　　　　　　　　　　　　　var　tp　=　$(temp.replace(/\$\{([\w]+)\}/g,　function(s1,　s2)　{
36.　　　　　　　　　　　　　　　　　　　　if　(s2　==　"text")　{
37.　　　　　　　　　　　　　　　　　　　　　　　　return　data[0];
38.　　　　　　　　　　　　　　　　　　　　}
39.　　　　　　　　　　　　　　　　　　　　else　if　(s2　==　"value")　{
40.　　　　　　　　　　　　　　　　　　　　　　　　return　data.join("|");
41.　　　　　　　　　　　　　　　　　　　　}
42.　　　　　　　　　　　　　　　　　　　　else　{
43.　　　　　　　　　　　　　　　　　　　　　　　　return　s1;
44.　　　　　　　　　　　　　　　　　　　　}
45.　　　　　　　　　　　　　　　　}));
46.　　　　　　　　　　　　　　　　tp.click(def.clickItem).find("img.bbit-usbox-del").click(removeitem);
47.　　　　　　　　　　　　　　　　$(inc).parent().before(tp);
48.　　　　　　　　　　　　　　　　if　(def.addItem)　{
49.　　　　　　　　　　　　　　　　　　　　def.addItem(data);
50.　　　　　　　　　　　　　　　　}
51.　　　　　　　　　　　　}
52.　　　　　　　　　　　　function　removeitem()　{
53.　　　　　　　　　　　　　　　　var　p　=　$(this).prev()
54.　　　　　　　　　　　　　　　　var　v　=　p.val();
55.　　　　　　　　　　　　　　　　var　arr　=　v.split("|");
56.　　　　　　　　　　　　　　　　if　(def.removeItem)　{
57.　　　　　　　　　　　　　　　　　　　　def.removeItem(arr);
58.　　　　　　　　　　　　　　　　}
59.　　　　　　　　　　　　　　　　$(this).parent().parent().remove();
60.　　　　　　　　　　　　}
61.　　　　　　　　　　　　return　me;
62.　　　　　　　　});
63.　　　　};
64.　　　　$.fn.addboxitem　=　function(op)　{
65.　　　　　　　　$(this).trigger("addboxitem",　[op]);
66.　　　　};
67.})(jQuery)