/*! * jQuery FlexBox $Version: 0.9.6 $ * * Copyright (c) 2008-2010 Noah Heldman and Fairway Technologies (http://www.fairwaytech.com/flexbox) * Licensed under Ms-PL (http://www.codeplex.com/flexbox/license) * * $Date: 2010-11-24 01:02:00 PM $ * $Rev: 0.9.6.1 $ */ (function($) { $.flexbox = function(div, o) { // TODO: in straight type-ahead mode (showResults: false), if noMatchingResults, dropdown appears after new match // TODO: consider having options.mode (select, which replaces html select; combobox; suggest; others?) // TODO: on resize (at least when wrapping within a table), the arrow is pushed down to the next line // TODO: check for boundary/value problems (such as minChars of -1) and alert them // TODO: add options for advanced paging template // TODO: general cleanup and refactoring, commenting // TODO: detailed Exception handling, logging // TODO: FF2, up arrow from bottom has erratic scroll behavior (if multiple flexboxes on page) // TODO: FF2 (and maybe IE7): if maxVisibleRows == number of returned rows, height is a bit off (maybe set to auto?) // TODO: escape key only works from input box (this might be okay) // TODO: make .getJSON parameters (object and callback function) configurable (e.g. when calling yahoo image search) // TODO: escape key reverts to previous value (FF only?) (is this a good thing?) // TEST: highlightMatches uses the case of whatever you typed in to replace the match string, which can look funny // TEST: handle pageDown and pageUp keys when scrolling through results // TEST: allow client-side paging (return all data initially, set paging:{pageSize:#}, and ensure maxCacheBytes is > 0) // TEST: accept json object as first parameter to flexbox instead of page source, and have it work like a combobox // TEST: implement no results template // TEST: implement noResultsText and class // TEST: watermark color should be configurable (and so should default input color) // TEST: exception handling and alerts for common mistakes // TEST: first example should use defaults ONLY // TEST: add property initialValue, so you can set it when the flexbox loads // TEST: handle hidden input value for form submissions // TEST: how can we allow programmatically setting the field value (and therefore hidden value). add jquery function? // TEST: use pageSize parameter as threshold to switch from no paging to paging based on results // TEST: if you type in an input value that matches the html, it might display html code (try typing "class" in the input box) // TEST: don't require all paging subprops (let default override) // TEST: when tabbing from one ffb to another, the previous ffb results flash... // TEST: IE7: when two non-paging ffbs right after each other, with only a clear-both div between them, the bottom ffb jumps down when selecting a value, then jumps back up on mouseover // TEST: FF2, make sure we scroll to top before showing results (maxVisibleRows only) // TEST: if maxVisibleRows is hiding the value the user types in to the input, scroll to that value (is this even possible?) // TEST: make sure caching supports multiple ffbs uniquely // TEST: when entering a number in the paging input box, the results are displayed twice var timeout = false, // hold timeout ID for suggestion results to appear cache = [], // simple array with cacheData key values, MRU is the first element cacheData = [], // associative array holding actual cached data cacheSize = 0, // size of cache in bytes (cache up to o.maxCacheBytes bytes) delim = '\u25CA', // use an obscure unicode character (lozenge) as the cache key delimiter scrolling = false, pageSize = o.paging && o.paging.pageSize ? o.paging.pageSize : 0, retrievingRemoteData = false, $div = $(div).css('position', 'relative').css('z-index', 0); // The hiddenField MUST be appended to the div before the input, or IE7 does not shift the dropdown below the input field (it overlaps) var $hdn = $('') .attr('id', $div.attr('id') + '_hidden') .attr('name', $div.attr('id')) .val(o.initialId) .appendTo($div); var $input = $('') .attr('id', $div.attr('id') + '_input') .attr('autocomplete', 'off') .addClass(o.inputClass) .css('width', o.width + 'px') .appendTo($div) .click(function(e) { if (o.watermark !== '' && this.value === o.watermark) this.value = ''; else this.select(); }) .focus(function(e) { $(this).removeClass('watermark'); }) .blur(function(e) { if (this.value === '') $hdn.val(''); setTimeout(function() { if (!$input.data('active')) hideResults(); }, 200); }) .keydown(processKeyDown); if (o.initialValue !== '') $input.val(o.initialValue).removeClass('watermark'); else $input.val(o.watermark).addClass('watermark'); var arrowWidth = 0; if (o.showArrow && o.showResults) { var arrowClick = function() { if ($ctr.is(':visible')) { hideResults(); } else { $input.focus(); if (o.watermark !== '' && $input.val() === o.watermark) $input.val(''); else $input.select(); if (timeout) clearTimeout(timeout); timeout = setTimeout(function() { flexbox(1, true, o.arrowQuery); }, o.queryDelay); } }; var $arrow = $('') .attr('id', $div.attr('id') + '_arrow') .addClass(o.arrowClass) .addClass('out') .hover(function() { $(this).removeClass('out').addClass('over'); }, function() { $(this).removeClass('over').addClass('out'); }) .mousedown(function() { $(this).removeClass('over').addClass('active'); }) .mouseup(function() { $(this).removeClass('active').addClass('over'); }) .click(arrowClick) .appendTo($div); arrowWidth = $arrow.width(); $input.css('width', (o.width - arrowWidth) + 'px'); } if (!o.allowInput) { o.selectFirstMatch = false; $input.click(arrowClick); } // simulate ') .addClass('box') .click(function(e) { this.select(); }) .keypress(function(e) { return handleKeyPress(e, this.value, totalPages); }) .val(currentPage) .appendTo($paging); } if (currentPage < totalPages) { $link.clone(true).attr('id', divId + 'n').attr('page', +currentPage + 1).html(next).appendTo($paging); $link.clone(true).attr('id', divId + 'l').attr('page', totalPages).html(last).appendTo($paging); } else { $span.clone(true).html(next).appendTo($paging); $span.clone(true).html(last).appendTo($paging); } var startingResult = (currentPage - 1) * pageSize + 1; var endingResult = (startingResult > (totalResults - pageSize)) ? totalResults : startingResult + pageSize - 1; if (o.paging.showSummary) { var summaryData = { "start": startingResult, "end": endingResult, "total": totalResults, "page": currentPage, "pages": totalPages }; var html = o.paging.summaryTemplate.applyTemplate(summaryData); $('
').appendTo($paging); $('') .addClass(o.paging.summaryClass) .html(html) .appendTo($paging); } } function checkCache(q, p) { var key = q + delim + p; // use null character as delimiter if (cacheData[key]) { for (var i = 0; i < cache.length; i++) { // TODO: is it possible to not loop here? if (cache[i] === key) { // pull out the matching element (splice), and add it to the beginning of the array (unshift) cache.unshift(cache.splice(i, 1)[0]); return cacheData[key]; } } } return false; } function updateCache(q, p, s, t, data, size) { if (o.maxCacheBytes > 0) { while (cache.length && (cacheSize + size > o.maxCacheBytes)) { var cached = cache.pop(); cacheSize -= cached.size; } var key = q + delim + p; // use null character as delimiter cacheData[key] = { q: q, p: p, s: s, t: t, size: size, data: data }; // add the data to the cache at the hash key location cache.push(key); // add the key to the MRU list cacheSize += size; } } function displayItems(d, q) { var totalSize = 0, itemCount = 0; if (!d) return; $hdn.val($input.val()); if (parseInt(d[o.totalProperty]) === 0 && o.noResultsText && o.noResultsText.length > 0) { $content.addClass(o.noResultsClass).html(o.noResultsText); $ctr.show(); return; } else $content.removeClass(o.noResultsClass); for (var i = 0; i < d[o.resultsProperty].length; i++) { var data = d[o.resultsProperty][i], result = o.resultTemplate.applyTemplate(data), exactMatch = q === result, selectedMatch = false, hasHtmlTags = false, match = data[o.displayValue]; if (!exactMatch && o.highlightMatches && q !== '') { var pattern = q, highlightStart = match.toLowerCase().indexOf(q.toLowerCase()), replaceString = '' + match.substr(highlightStart,q.length) + ''; if (result.match('<(.|\n)*?>')) { // see if the content contains html tags hasHtmlTags = true; pattern = '(>)([^<]*?)(' + q + ')((.|\n)*?)(<)'; // TODO: look for a better way replaceString = '$1$2$3$4$6'; } result = result.replace(new RegExp(pattern.replace("[", "\\["), o.highlightMatchesRegExModifier), replaceString); } // write the value of the first match to the input box, and select the remainder, // but only if autoCompleteFirstMatch is set, and there are no html tags in the response if (o.autoCompleteFirstMatch && !hasHtmlTags && i === 0) { if (q.length > 0 && match.toLowerCase().indexOf(q.toLowerCase()) === 0) { $input.attr('pq', q); // pq == previous query $hdn.val(data[o.hiddenValue]); $input.val(data[o.displayValue]); selectedMatch = selectRange(q.length, $input.val().length); } } if (!o.showResults) return; $row = $('
') .attr('id', data[o.hiddenValue]) .attr('val', data[o.displayValue]) .addClass('row') .html(result) .appendTo($content); if (exactMatch || (++itemCount == 1 && o.selectFirstMatch) || selectedMatch) { $row.addClass(o.selectClass); } totalSize += result.length; } if (totalSize === 0) { hideResults(); return; } $ctr.parent().css('z-index', 11000); $ctr.show(); $content .children('div') .mouseover(function() { $content.children('div').removeClass(o.selectClass); $(this).addClass(o.selectClass); }) .mouseup(function(e) { e.preventDefault(); e.stopPropagation(); selectCurr(); }); if (o.maxVisibleRows > 0) { var maxHeight = $row.outerHeight() * o.maxVisibleRows; $content.css('max-height', maxHeight); } return totalSize; } function selectRange(s, l) { var tb = $input[0]; if (tb.createTextRange) { var r = tb.createTextRange(); r.moveStart('character', s); r.moveEnd('character', l - tb.value.length); r.select(); } else if (tb.setSelectionRange) { tb.setSelectionRange(s, l); } tb.focus(); return true; } String.prototype.applyTemplate = function(d) { try { if (d === '') return this; return this.replace(/{([^{}]*)}/g, function(a, b) { var r; if (b.indexOf('.') !== -1) { // handle dot notation in {}, such as {Thumbnail.Url} var ary = b.split('.'); var obj = d; for (var i = 0; i < ary.length; i++) obj = obj[ary[i]]; r = obj; } else r = d[b]; if (typeof r === 'string' || typeof r === 'number') return r; else throw (a); } ); } catch (ex) { alert('Invalid JSON property ' + ex + ' found when trying to apply resultTemplate or paging.summaryTemplate.\nPlease check your spelling and try again.'); } }; function hideResults() { $input.data('active', false); // for input blur $div.css('z-index', 0); $ctr.hide(); } function getCurr() { if (!$ctr.is(':visible')) return false; var $curr = $content.children('div.' + o.selectClass); if (!$curr.length) $curr = false; return $curr; } function selectCurr() { $curr = getCurr(); if ($curr) { $hdn.val($curr.attr('id')); $input.val($curr.attr('val')).focus(); hideResults(); if (o.onSelect) { o.onSelect.apply($input[0]); } } } function supportsGetBoxObjectFor() { try { document.getBoxObjectFor(document.body); return true; } catch (e) { return false; } } function supportsGetBoundingClientRect() { try { document.body.getBoundingClientRect(); return true; } catch (e) { return false; } } function nextPage() { $curr = getCurr(); if ($curr && $curr.next().length > 0) { $curr.removeClass(o.selectClass); for (var i = 0; i < o.maxVisibleRows; i++) { if ($curr.next().length > 0) { $curr = $curr.next(); } } $curr.addClass(o.selectClass); var scrollPos = $content.attr('scrollTop'); $content.attr('scrollTop', scrollPos + $content.height()); } else if (!$curr) $content.children('div:first-child').addClass(o.selectClass); } function prevPage() { $curr = getCurr(); if ($curr && $curr.prev().length > 0) { $curr.removeClass(o.selectClass); for (var i = 0; i < o.maxVisibleRows; i++) { if ($curr.prev().length > 0) { $curr = $curr.prev(); } } $curr.addClass(o.selectClass); var scrollPos = $content.attr('scrollTop'); $content.attr('scrollTop', scrollPos - $content.height()); } else if (!$curr) $content.children('div:last-child').addClass(o.selectClass); } function nextResult() { $curr = getCurr(); if ($curr && $curr.next().length > 0) { $curr.removeClass(o.selectClass).next().addClass(o.selectClass); var scrollPos = $content.attr('scrollTop'), curr = $curr[0], parentBottom, bottom, height; if (supportsGetBoxObjectFor()) { parentBottom = document.getBoxObjectFor($content[0]).y + $content.attr('offsetHeight'); bottom = document.getBoxObjectFor(curr).y + $curr.attr('offsetHeight'); height = document.getBoxObjectFor(curr).height; } else if (supportsGetBoundingClientRect()) { parentBottom = $content[0].getBoundingClientRect().bottom; var rect = curr.getBoundingClientRect(); bottom = rect.bottom; height = bottom - rect.top; } if (bottom >= parentBottom) $content.attr('scrollTop', scrollPos + height); } else if (!$curr) $content.children('div:first-child').addClass(o.selectClass); } function prevResult() { $curr = getCurr(); if ($curr && $curr.prev().length > 0) { $curr.removeClass(o.selectClass).prev().addClass(o.selectClass); var scrollPos = $content.attr('scrollTop'), curr = $curr[0], parent = $curr.parent()[0], parentTop, top, height; if (supportsGetBoxObjectFor()) { height = document.getBoxObjectFor(curr).height; parentTop = document.getBoxObjectFor($content[0]).y - (height * 2); // TODO: this is not working when i add another control... top = document.getBoxObjectFor(curr).y - document.getBoxObjectFor($content[0]).y; } else if (supportsGetBoundingClientRect()) { parentTop = parent.getBoundingClientRect().top; var rect = curr.getBoundingClientRect(); top = rect.top; height = rect.bottom - top; } if (top <= parentTop) $content.attr('scrollTop', scrollPos - height); } else if (!$curr) $content.children('div:last-child').addClass(o.selectClass); } }; $.fn.flexbox = function(source, options) { if (!source) return; try { var defaults = $.fn.flexbox.defaults; var o = $.extend({}, defaults, options); for (var prop in o) { if (defaults[prop] === undefined) throw ('Invalid option specified: ' + prop + '\nPlease check your spelling and try again.'); } o.source = source; if (options) { o.paging = (options.paging || options.paging == null) ? $.extend({}, defaults.paging, options.paging) : false; for (var prop in o.paging) { if (defaults.paging[prop] === undefined) throw ('Invalid option specified: ' + prop + '\nPlease check your spelling and try again.'); } if (options.displayValue && !options.hiddenValue) { o.hiddenValue = options.displayValue; } } this.each(function() { new $.flexbox(this, o); }); return this; } catch (ex) { if (typeof ex === 'object') alert(ex.message); else alert(ex); } }; // plugin defaults - added as a property on our plugin function so they can be set independently $.fn.flexbox.defaults = { method: 'GET', // One of 'GET' or 'POST' queryDelay: 100, // num of milliseconds before query is run. allowInput: true, // set to false to disallow the user from typing in queries containerClass: 'ffb', contentClass: 'content', selectClass: 'ffb-sel', inputClass: 'ffb-input', arrowClass: 'ffb-arrow', matchClass: 'ffb-match', noResultsText: 'No matching results', // text to show when no results match the query noResultsClass: 'ffb-no-results', // class to apply to noResultsText showResults: true, // whether to show results at all, or just typeahead selectFirstMatch: true, // whether to highlight the first matching value autoCompleteFirstMatch: false, // whether to complete the first matching value in the input box highlightMatches: true, // whether all matches within the string should be highlighted with matchClass highlightMatchesRegExModifier: 'i', // 'i' for case-insensitive, 'g' for global (all occurrences), or combine matchAny: true, // for client-side filtering ONLY, match any occurrence of the search term in the result (e.g. "ar" would find "area" and "cart") minChars: 1, // the minimum number of characters the user must enter before a search is executed showArrow: true, // set to false to simulate google suggest arrowQuery: '', // the query to run when the arrow is clicked onSelect: false, // function to run when a result is selected maxCacheBytes: 32768, // in bytes, 0 means caching is disabled resultTemplate: '{name}', // html template for each row (put json properties in curly braces) displayValue: 'name', // json element whose value is displayed on select hiddenValue: 'id', // json element whose value is submitted when form is submitted initialValue: '', // what should the value of the input field be when the form is loaded? initialId: '', // what should the value of the hidden field be when the form is loaded? watermark: '', // text that appears when flexbox is loaded, if no initialValue is specified. style with css class '.ffb-input.watermark' width: 200, // total width of flexbox. auto-adjusts based on showArrow value resultsProperty: 'results', // json property in response that references array of results totalProperty: 'total', // json property in response that references the total results (for paging) maxVisibleRows: 0, // default is 0, which means it is ignored. use either this, or paging.pageSize paging: { style: 'input', // or 'links' cssClass: 'paging', // prefix with containerClass (e.g. .ffb .paging) pageSize: 10, // acts as a threshold. if <= pageSize results, paging doesn't appear maxPageLinks: 5, // used only if style is 'links' showSummary: true, // whether to show 'displaying 1-10 of 200 results' text summaryClass: 'summary', // class for 'displaying 1-10 of 200 results', prefix with containerClass summaryTemplate: 'Displaying {start}-{end} of {total} results' // can use {page} and {pages} as well } }; $.fn.setValue = function(val) { var id = '#' + this.attr('id'); $(id + '_hidden,' + id + '_input').val(val).removeClass('watermark'); }; })(jQuery);