基于jQuery打造智能的人员选择输入框
2009-10-29 00:00:00 来源:WEB开发网本例中只有使用一个图片.
第二 开始编写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)
更多精彩
赞助商链接