jquery.autocomplete.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
  1. /*
  2. * jQuery Autocomplete plugin 1.1
  3. *
  4. * Copyright (c) 2009 Jörn Zaefferer
  5. *
  6. * Dual licensed under the MIT and GPL licenses:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. * http://www.gnu.org/licenses/gpl.html
  9. *
  10. * Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $
  11. */;
  12. $.browser = navigator.userAgent;
  13. (function($) {
  14. $.fn.extend({
  15. autocomplete: function(urlOrData, options) {
  16. var isUrl = typeof urlOrData == "string";
  17. options = $.extend({}, $.Autocompleter.defaults, {
  18. url: isUrl ? urlOrData : null,
  19. data: isUrl ? null : urlOrData,
  20. delay: isUrl ? $.Autocompleter.defaults.delay : 10,
  21. max: options && !options.scroll ? 10 : 150
  22. }, options);
  23. options.highlight = options.highlight ||
  24. function(value) {
  25. return value;
  26. };
  27. options.formatMatch = options.formatMatch || options.formatItem;
  28. return this.each(function() {
  29. new $.Autocompleter(this, options);
  30. });
  31. },
  32. result: function(handler) {
  33. return this.bind("result", handler);
  34. },
  35. search: function(handler) {
  36. return this.trigger("search", [handler]);
  37. },
  38. flushCache: function() {
  39. return this.trigger("flushCache");
  40. },
  41. setOptions: function(options) {
  42. return this.trigger("setOptions", [options]);
  43. },
  44. unautocomplete: function() {
  45. return this.trigger("unautocomplete");
  46. }
  47. });
  48. $.Autocompleter = function(input, options) {
  49. var KEY = {
  50. UP: 38,
  51. DOWN: 40,
  52. DEL: 46,
  53. TAB: 9,
  54. RETURN: 13,
  55. ESC: 27,
  56. COMMA: 188,
  57. PAGEUP: 33,
  58. PAGEDOWN: 34,
  59. BACKSPACE: 8
  60. };
  61. var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
  62. var timeout;
  63. var previousValue = "";
  64. var cache = $.Autocompleter.Cache(options);
  65. var hasFocus = 0;
  66. var lastKeyPressCode;
  67. var config = {
  68. mouseDownOnSelect: false
  69. };
  70. var select = $.Autocompleter.Select(options, input, selectCurrent, config);
  71. var blockSubmit;
  72. $.browser.opera && $(input.form).bind("submit.autocomplete", function() {
  73. if (blockSubmit) {
  74. blockSubmit = false;
  75. return false;
  76. }
  77. });
  78. $input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
  79. hasFocus = 1;
  80. lastKeyPressCode = event.keyCode;
  81. switch (event.keyCode) {
  82. case KEY.UP:
  83. event.preventDefault();
  84. if (select.visible()) {
  85. select.prev();
  86. } else {
  87. onChange(0, true);
  88. }
  89. break;
  90. case KEY.DOWN:
  91. event.preventDefault();
  92. if (select.visible()) {
  93. select.next();
  94. } else {
  95. onChange(0, true);
  96. }
  97. break;
  98. case KEY.PAGEUP:
  99. event.preventDefault();
  100. if (select.visible()) {
  101. select.pageUp();
  102. } else {
  103. onChange(0, true);
  104. }
  105. break;
  106. case KEY.PAGEDOWN:
  107. event.preventDefault();
  108. if (select.visible()) {
  109. select.pageDown();
  110. } else {
  111. onChange(0, true);
  112. }
  113. break;
  114. case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA:
  115. case KEY.TAB:
  116. case KEY.RETURN:
  117. if (selectCurrent()) {
  118. event.preventDefault();
  119. blockSubmit = true;
  120. return false;
  121. }
  122. break;
  123. case KEY.ESC:
  124. select.hide();
  125. break;
  126. default:
  127. clearTimeout(timeout);
  128. timeout = setTimeout(onChange, options.delay);
  129. break;
  130. }
  131. }).focus(function() {
  132. hasFocus++;
  133. }).blur(function() {
  134. hasFocus = 0;
  135. if (!config.mouseDownOnSelect) {
  136. hideResults();
  137. }
  138. }).click(function() {
  139. if (hasFocus++ > 1 && !select.visible()) {
  140. onChange(0, true);
  141. }
  142. }).bind("search", function() {
  143. var fn = (arguments.length > 1) ? arguments[1] : null;
  144. function findValueCallback(q, data) {
  145. var result;
  146. if (data && data.length) {
  147. for (var i = 0; i < data.length; i++) {
  148. if (data[i].result.toLowerCase() == q.toLowerCase()) {
  149. result = data[i];
  150. break;
  151. }
  152. }
  153. }
  154. if (typeof fn == "function") fn(result);
  155. else $input.trigger("result", result && [result.data, result.value]);
  156. }
  157. $.each(trimWords($input.val()), function(i, value) {
  158. request(value, findValueCallback, findValueCallback);
  159. });
  160. }).bind("flushCache", function() {
  161. cache.flush();
  162. }).bind("setOptions", function() {
  163. $.extend(options, arguments[1]);
  164. if ("data" in arguments[1]) cache.populate();
  165. }).bind("unautocomplete", function() {
  166. select.unbind();
  167. $input.unbind();
  168. $(input.form).unbind(".autocomplete");
  169. });
  170. function selectCurrent() {
  171. var selected = select.selected();
  172. if (!selected) return false;
  173. var v = selected.result;
  174. previousValue = v;
  175. if (options.multiple) {
  176. var words = trimWords($input.val());
  177. if (words.length > 1) {
  178. var seperator = options.multipleSeparator.length;
  179. var cursorAt = $(input).selection().start;
  180. var wordAt, progress = 0;
  181. $.each(words, function(i, word) {
  182. progress += word.length;
  183. if (cursorAt <= progress) {
  184. wordAt = i;
  185. return false;
  186. }
  187. progress += seperator;
  188. });
  189. words[wordAt] = v;
  190. v = words.join(options.multipleSeparator);
  191. }
  192. v += options.multipleSeparator;
  193. }
  194. $input.val(v);
  195. hideResultsNow();
  196. $input.trigger("result", [selected.data, selected.value]);
  197. return true;
  198. }
  199. function onChange(crap, skipPrevCheck) {
  200. if (lastKeyPressCode == KEY.DEL) {
  201. select.hide();
  202. return;
  203. }
  204. var currentValue = $input.val();
  205. if (!skipPrevCheck && currentValue == previousValue) return;
  206. previousValue = currentValue;
  207. currentValue = lastWord(currentValue);
  208. if (currentValue.length >= options.minChars) {
  209. $input.addClass(options.loadingClass);
  210. if (!options.matchCase) currentValue = currentValue.toLowerCase();
  211. request(currentValue, receiveData, hideResultsNow);
  212. } else {
  213. stopLoading();
  214. select.hide();
  215. }
  216. };
  217. function trimWords(value) {
  218. if (!value) return [""];
  219. if (!options.multiple) return [$.trim(value)];
  220. return $.map(value.split(options.multipleSeparator), function(word) {
  221. return $.trim(value).length ? $.trim(word) : null;
  222. });
  223. }
  224. function lastWord(value) {
  225. if (!options.multiple) return value;
  226. var words = trimWords(value);
  227. if (words.length == 1) return words[0];
  228. var cursorAt = $(input).selection().start;
  229. if (cursorAt == value.length) {
  230. words = trimWords(value)
  231. } else {
  232. words = trimWords(value.replace(value.substring(cursorAt), ""));
  233. }
  234. return words[words.length - 1];
  235. }
  236. function autoFill(q, sValue) {
  237. if (options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE) {
  238. $input.val($input.val() + sValue.substring(lastWord(previousValue).length));
  239. $(input).selection(previousValue.length, previousValue.length + sValue.length);
  240. }
  241. };
  242. function hideResults() {
  243. clearTimeout(timeout);
  244. timeout = setTimeout(hideResultsNow, 200);
  245. };
  246. function hideResultsNow() {
  247. var wasVisible = select.visible();
  248. select.hide();
  249. clearTimeout(timeout);
  250. stopLoading();
  251. if (options.mustMatch) {
  252. $input.search(function(result) {
  253. if (!result) {
  254. if (options.multiple) {
  255. var words = trimWords($input.val()).slice(0, -1);
  256. $input.val(words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : ""));
  257. } else {
  258. $input.val("");
  259. $input.trigger("result", null);
  260. }
  261. }
  262. });
  263. }
  264. };
  265. function receiveData(q, data) {
  266. if (data && data.length && hasFocus) {
  267. stopLoading();
  268. select.display(data, q);
  269. autoFill(q, data[0].value);
  270. select.show();
  271. } else {
  272. hideResultsNow();
  273. }
  274. };
  275. function request(term, success, failure) {
  276. if (!options.matchCase) term = term.toLowerCase();
  277. var data = cache.load(term);
  278. if (data && data.length) {
  279. success(term, data);
  280. } else if ((typeof options.url == "string") && (options.url.length > 0)) {
  281. var extraParams = {
  282. timestamp: +new Date()
  283. };
  284. $.each(options.extraParams, function(key, param) {
  285. extraParams[key] = typeof param == "function" ? param() : param;
  286. });
  287. $.ajax({
  288. mode: "abort",
  289. port: "autocomplete" + input.name,
  290. dataType: options.dataType,
  291. url: options.url,
  292. data: $.extend({
  293. wd: lastWord(term),
  294. limit: options.max
  295. }, extraParams),
  296. success: function(data) {
  297. var parsed = options.parse && options.parse(data) || parse(data);
  298. cache.add(term, parsed);
  299. success(term, parsed);
  300. }
  301. });
  302. } else {
  303. select.emptyList();
  304. failure(term);
  305. }
  306. };
  307. function parse(data) {
  308. var parsed = [];
  309. var rows = data.split("\n");
  310. for (var i = 0; i < rows.length; i++) {
  311. var row = $.trim(rows[i]);
  312. if (row) {
  313. row = row.split("|");
  314. parsed[parsed.length] = {
  315. data: row,
  316. value: row[0],
  317. result: options.formatResult && options.formatResult(row, row[0]) || row[0]
  318. };
  319. }
  320. }
  321. return parsed;
  322. };
  323. function stopLoading() {
  324. $input.removeClass(options.loadingClass);
  325. };
  326. };
  327. $.Autocompleter.defaults = {
  328. inputClass: "ac_input",
  329. resultsClass: "ac_results",
  330. loadingClass: "ac_loading",
  331. minChars: 1,
  332. delay: 400,
  333. matchCase: false,
  334. matchSubset: false,
  335. matchContains: false,
  336. cacheLength: 10,
  337. max: 100,
  338. mustMatch: false,
  339. extraParams: {},
  340. selectFirst: true,
  341. formatItem: function(row) {
  342. return row[0];
  343. },
  344. formatMatch: null,
  345. autoFill: false,
  346. width: 0,
  347. multiple: false,
  348. multipleSeparator: ", ",
  349. highlight: function(value, term) {
  350. return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
  351. },
  352. scroll: true,
  353. scrollHeight: 180
  354. };
  355. $.Autocompleter.Cache = function(options) {
  356. var data = {};
  357. var length = 0;
  358. function matchSubset(s, sub) {
  359. if (!options.matchCase) s = s.toLowerCase();
  360. var i = s.indexOf(sub);
  361. if (options.matchContains == "word") {
  362. i = s.toLowerCase().search("\\b" + sub.toLowerCase());
  363. }
  364. if (i == -1) return false;
  365. return i == 0 || options.matchContains;
  366. };
  367. function add(q, value) {
  368. if (length > options.cacheLength) {
  369. flush();
  370. }
  371. if (!data[q]) {
  372. length++;
  373. }
  374. data[q] = value;
  375. }
  376. function populate() {
  377. if (!options.data) return false;
  378. var stMatchSets = {},
  379. nullData = 0;
  380. if (!options.url) options.cacheLength = 1;
  381. stMatchSets[""] = [];
  382. for (var i = 0, ol = options.data.length; i < ol; i++) {
  383. var rawValue = options.data[i];
  384. rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue;
  385. var value = options.formatMatch(rawValue, i + 1, options.data.length);
  386. if (value === false) continue;
  387. var firstChar = value.charAt(0).toLowerCase();
  388. if (!stMatchSets[firstChar]) stMatchSets[firstChar] = [];
  389. var row = {
  390. value: value,
  391. data: rawValue,
  392. result: options.formatResult && options.formatResult(rawValue) || value
  393. };
  394. stMatchSets[firstChar].push(row);
  395. if (nullData++ < options.max) {
  396. stMatchSets[""].push(row);
  397. }
  398. };
  399. $.each(stMatchSets, function(i, value) {
  400. options.cacheLength++;
  401. add(i, value);
  402. });
  403. }
  404. setTimeout(populate, 25);
  405. function flush() {
  406. data = {};
  407. length = 0;
  408. }
  409. return {
  410. flush: flush,
  411. add: add,
  412. populate: populate,
  413. load: function(q) {
  414. if (!options.cacheLength || !length) return null;
  415. if (!options.url && options.matchContains) {
  416. var csub = [];
  417. for (var k in data) {
  418. if (k.length > 0) {
  419. var c = data[k];
  420. $.each(c, function(i, x) {
  421. if (matchSubset(x.value, q)) {
  422. csub.push(x);
  423. }
  424. });
  425. }
  426. }
  427. return csub;
  428. } else if (data[q]) {
  429. return data[q];
  430. } else if (options.matchSubset) {
  431. for (var i = q.length - 1; i >= options.minChars; i--) {
  432. var c = data[q.substr(0, i)];
  433. if (c) {
  434. var csub = [];
  435. $.each(c, function(i, x) {
  436. if (matchSubset(x.value, q)) {
  437. csub[csub.length] = x;
  438. }
  439. });
  440. return csub;
  441. }
  442. }
  443. }
  444. return null;
  445. }
  446. };
  447. };
  448. $.Autocompleter.Select = function(options, input, select, config) {
  449. var CLASSES = {
  450. ACTIVE: "ac_over"
  451. };
  452. var listItems, active = -1,
  453. data, term = "",
  454. needsInit = true,
  455. element, list;
  456. function init() {
  457. if (!needsInit) return;
  458. element = $("<div/>").hide().addClass(options.resultsClass).css("position", "absolute").appendTo(document.body);
  459. list = $("<ul/>").appendTo(element).mouseover(function(event) {
  460. if (target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
  461. active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
  462. $(target(event)).addClass(CLASSES.ACTIVE);
  463. }
  464. }).click(function(event) {
  465. $(target(event)).addClass(CLASSES.ACTIVE);
  466. select();
  467. input.focus();
  468. return false;
  469. }).mousedown(function() {
  470. config.mouseDownOnSelect = true;
  471. }).mouseup(function() {
  472. config.mouseDownOnSelect = false;
  473. });
  474. if (options.width > 0) element.css("width", options.width);
  475. needsInit = false;
  476. }
  477. function target(event) {
  478. var element = event.target;
  479. while (element && element.tagName != "LI") element = element.parentNode;
  480. if (!element) return [];
  481. return element;
  482. }
  483. function moveSelect(step) {
  484. listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);
  485. movePosition(step);
  486. var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);
  487. if (options.scroll) {
  488. var offset = 0;
  489. listItems.slice(0, active).each(function() {
  490. offset += this.offsetHeight;
  491. });
  492. if ((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {
  493. list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());
  494. } else if (offset < list.scrollTop()) {
  495. list.scrollTop(offset);
  496. }
  497. }
  498. };
  499. function movePosition(step) {
  500. active += step;
  501. if (active < 0) {
  502. active = listItems.size() - 1;
  503. } else if (active >= listItems.size()) {
  504. active = 0;
  505. }
  506. }
  507. function limitNumberOfItems(available) {
  508. return options.max && options.max < available ? options.max : available;
  509. }
  510. function fillList() {
  511. list.empty();
  512. var max = limitNumberOfItems(data.length);
  513. for (var i = 0; i < max; i++) {
  514. if (!data[i]) continue;
  515. var formatted = options.formatItem(data[i].data, i + 1, max, data[i].value, term);
  516. if (formatted === false) continue;
  517. var li = $("<li/>").html(options.highlight(formatted, term)).addClass(i % 2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0];
  518. $.data(li, "ac_data", data[i]);
  519. }
  520. listItems = list.find("li");
  521. if (options.selectFirst) {
  522. listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
  523. active = 0;
  524. }
  525. if ($.fn.bgiframe) list.bgiframe();
  526. }
  527. return {
  528. display: function(d, q) {
  529. init();
  530. data = d;
  531. term = q;
  532. fillList();
  533. },
  534. next: function() {
  535. moveSelect(1);
  536. },
  537. prev: function() {
  538. moveSelect(-1);
  539. },
  540. pageUp: function() {
  541. if (active != 0 && active - 8 < 0) {
  542. moveSelect(-active);
  543. } else {
  544. moveSelect(-8);
  545. }
  546. },
  547. pageDown: function() {
  548. if (active != listItems.size() - 1 && active + 8 > listItems.size()) {
  549. moveSelect(listItems.size() - 1 - active);
  550. } else {
  551. moveSelect(8);
  552. }
  553. },
  554. hide: function() {
  555. element && element.hide();
  556. listItems && listItems.removeClass(CLASSES.ACTIVE);
  557. active = -1;
  558. },
  559. visible: function() {
  560. return element && element.is(":visible");
  561. },
  562. current: function() {
  563. return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]);
  564. },
  565. show: function() {
  566. var offset = $(input).offset();
  567. element.css({
  568. width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),
  569. top: offset.top + input.offsetHeight,
  570. left: offset.left
  571. }).show();
  572. if (options.scroll) {
  573. list.scrollTop(0);
  574. list.css({
  575. maxHeight: options.scrollHeight,
  576. overflow: 'auto'
  577. });
  578. if ($.browser.msie && typeof document.body.style.maxHeight === "undefined") {
  579. var listHeight = 0;
  580. listItems.each(function() {
  581. listHeight += this.offsetHeight;
  582. });
  583. var scrollbarsVisible = listHeight > options.scrollHeight;
  584. list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight);
  585. if (!scrollbarsVisible) {
  586. listItems.width(list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")));
  587. }
  588. }
  589. }
  590. },
  591. selected: function() {
  592. var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
  593. return selected && selected.length && $.data(selected[0], "ac_data");
  594. },
  595. emptyList: function() {
  596. list && list.empty();
  597. },
  598. unbind: function() {
  599. element && element.remove();
  600. }
  601. };
  602. };
  603. $.fn.selection = function(start, end) {
  604. if (start !== undefined) {
  605. return this.each(function() {
  606. if (this.createTextRange) {
  607. var selRange = this.createTextRange();
  608. if (end === undefined || start == end) {
  609. selRange.move("character", start);
  610. selRange.select();
  611. } else {
  612. selRange.collapse(true);
  613. selRange.moveStart("character", start);
  614. selRange.moveEnd("character", end);
  615. selRange.select();
  616. }
  617. } else if (this.setSelectionRange) {
  618. this.setSelectionRange(start, end);
  619. } else if (this.selectionStart) {
  620. this.selectionStart = start;
  621. this.selectionEnd = end;
  622. }
  623. });
  624. }
  625. var field = this[0];
  626. if (field.createTextRange) {
  627. var range = document.selection.createRange(),
  628. orig = field.value,
  629. teststring = "<->",
  630. textLength = range.text.length;
  631. range.text = teststring;
  632. var caretAt = field.value.indexOf(teststring);
  633. field.value = orig;
  634. this.selection(caretAt, caretAt + textLength);
  635. return {
  636. start: caretAt,
  637. end: caretAt + textLength
  638. }
  639. } else if (field.selectionStart !== undefined) {
  640. return {
  641. start: field.selectionStart,
  642. end: field.selectionEnd
  643. }
  644. }
  645. };
  646. })(jQuery);