diff --git a/output/js/jquery.jsonSuggest-dev.js b/output/js/jquery.jsonSuggest-dev.js new file mode 100755 index 0000000..9376b0e --- /dev/null +++ b/output/js/jquery.jsonSuggest-dev.js @@ -0,0 +1,350 @@ +/* + * Copyright (c) 2009 Tom Coote (http://www.tomcoote.co.uk) + * This is licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + * + */ + +/*jslint eqeqeq: true, browser: true */ +/*global jQuery */ + +/** + * Turn a text box into an auto suggest box which search's and + * displays results specified in a JSON string + * + * + * @name jsonSuggest + * @type jQuery + * @param searchData : [required] Can be one of three things; a JSON string which specified the search data, an object that is representative of a parsed JSON string or a function which returns either of these two things. + * expected object format example; (either as raw object or JSON string) + [ + { + id: 1, + text: 'Thomas', + image: 'img/avator1.jpg', // optional + extra: 'www.thomas.com' // optional + }, + { + id: 2, + text: 'Frederic', + image: 'img/avator2.jpg', // optional + extra: 'www.freddy.com' // optional + }, + { + id: 2, + text: 'James', + image: 'img/avator2.jpg', // optional + extra: 'www.james.com' // optional + } + ] + * @param Object settings; [optional] + * minCharacters : [default 1] Number of characters that the input should accept before running a search. + * maxResults: [default undefined] If set then no more results than this number will be found. + * wildCard : [default ''] A character to be used as a match all wildcard when searching. Leaving empty will mean results are matched inside + * strings but if a wildCard is present then results are matched from the beginning of strings. + * caseSensitive : [defautl false] True if the filter search's are to be case sensitive. + * notCharacter : [default !] The character to use at the start of any search text to specify that the results should NOT contain the following text. + * maxHeight : [default 350] This is the maximum height that the results box can reach before scroll bars are shown instead of getting taller. + * highlightMatches: [default true] This will add strong tags around the text that matches the search text in each result. + * onSelect : [default undefined] Function that gets called once a result has been selected, gets passed in the object version of the result as specified in the json string + * ajaxResults : [default false] If this is set to true then you must specify a function as the searchData construction parameter. This is because when this + * settings is true then results are retrieved from an external function each time they are needed instead of being retrieved from the data given on + * contruction. The searchData function must return a JSON string of resulting objects or the object which represents the JSON string. The function is + * passed the following paramenters; + * 1. The search text typed into the input box + * 2. The current wildCard setting + * 3. The current caseSensitive setting + * 4. The current notCharacter setting + * width: [default undefined] If set this will become the width of the results box else the box will be the same width as the input + * @author Tom Coote (www.tomcoote.co.uk) + * @version 1.2.4 + */ + +(function($){ + + $.fn.jsonSuggest = function(searchData, settings) { + var defaults = { + minCharacters: 1, + maxResults: undefined, + wildCard: "", + caseSensitive: false, + notCharacter: "!", + maxHeight: 350, + highlightMatches: true, + onSelect: undefined, + ajaxResults: false, + width: undefined + }; + settings = $.extend(defaults, settings); + + return this.each(function() { + + function regexEscape(txt, omit) { + var specials = ['/', '.', '*', '+', '?', '|', + '(', ')', '[', ']', '{', '}', '\\']; + + if (omit) { + for (var i=0; i < specials.length; i++) { + if (specials[i] === omit) { specials.splice(i,1); } + } + } + + var escapePatt = new RegExp('(\\' + specials.join('|\\') + ')', 'g'); + return txt.replace(escapePatt, '\\$1'); + } + + var obj = $(this), + wildCardPatt = new RegExp(regexEscape(settings.wildCard || ''),'g'), + results = $('
'), + currentSelection, pageX, pageY; + + // When an item has been selected then update the input box, + // hide the results again and if set, call the onSelect function + function selectResultItem(item) { + obj.val(item.text); + $(results).html('').hide(); + + if (typeof settings.onSelect === 'function') { + settings.onSelect(item); + } + } + + // Used to get rid of the hover class on all result item elements in the + // current set of results and add it only to the given element. We also + // need to set the current selection to the given element here. + function setHoverClass(el) { + $('div.resultItem', results).removeClass('hover'); + $(el).addClass('hover'); + + currentSelection = el; + } + + // Build the results HTML based on an array of objects that matched + // the search criteria, highlight the matches if feature is turned on in + // the settings. + function buildResults(resultObjects, sFilterTxt) { + sFilterTxt = "(" + sFilterTxt + ")"; + + var bOddRow = true, i, iFound = 0, + filterPatt = settings.caseSensitive ? new RegExp(sFilterTxt, "g") : new RegExp(sFilterTxt, "ig"); + + $(results).html('').hide(); + + for (i = 0; i < resultObjects.length; i += 1) { + var item = $('
'), + text = resultObjects[i].text; + + if (settings.highlightMatches === true) { + text = text.replace(filterPatt, "$1"); + } + + $(item).append('

' + text + '

'); + + if (typeof resultObjects[i].extra === 'string') { + $(item).append('

' + resultObjects[i].extra + '

'); + } + + if (typeof resultObjects[i].image === 'string') { + $(item).prepend(''). + append('
'); + } + + $(item).addClass('resultItem'). + addClass((bOddRow) ? 'odd' : 'even'). + click(function(n) { return function() { + selectResultItem(resultObjects[n]); + };}(i)). + mouseover(function(el) { return function() { + setHoverClass(el); + };}(item)); + + $(results).append(item); + + bOddRow = !bOddRow; + + iFound += 1; + if (typeof settings.maxResults === 'number' && iFound >= settings.maxResults) { + break; + } + } + + if ($('div', results).length > 0) { + currentSelection = undefined; + $(results).show().css('height', 'auto'); + + if ($(results).height() > settings.maxHeight) { + $(results).css({'overflow': 'auto', 'height': settings.maxHeight + 'px'}); + } + } + } + + // Prepare the search string based on the settings for this plugin, + // run it against each item in the searchData and display any + // results on the page allowing selection by the user. + function runSuggest(e) { + if (this.value.length < settings.minCharacters) { + $(results).html('').hide(); + return false; + } + + var resultObjects = [], + sFilterTxt = (!settings.wildCard) ? regexEscape(this.value) : regexEscape(this.value, settings.wildCard).replace(wildCardPatt, '.*'), + bMatch = true, + filterPatt, i; + + if (settings.notCharacter && sFilterTxt.indexOf(settings.notCharacter) === 0) { + sFilterTxt = sFilterTxt.substr(settings.notCharacter.length,sFilterTxt.length); + if (sFilterTxt.length > 0) { bMatch = false; } + } + sFilterTxt = sFilterTxt || '.*'; + sFilterTxt = settings.wildCard ? '^' + sFilterTxt : sFilterTxt; + filterPatt = settings.caseSensitive ? new RegExp(sFilterTxt) : new RegExp(sFilterTxt,"i"); + + // Get the results from the correct place. If settings.ajaxResults then results are retrieved from + // an external function each time they are needed else they are retrieved from the data + // given on contruction. + if (settings.ajaxResults === true) { + resultObjects = searchData(this.value, settings.wildCard, + settings.caseSensitive, + settings.notCharacter); + + if (typeof resultObjects === 'string') { + resultObjects = JSON.parse(resultObjects); + } + } + else { + // Look for the required match against each single search data item. When the not + // character is used we are looking for a false match. + for (i = 0; i < searchData.length; i += 1) { + if (filterPatt.test(searchData[i].text) === bMatch) { + resultObjects.push(searchData[i]); + } + } + } + + buildResults(resultObjects, sFilterTxt); + } + + // To call specific actions based on the keys pressed in the input + // box. Special keys are up, down and return. All other keys + // act as normal. + function keyListener(e) { + switch (e.keyCode) { + case 13: // return key + $(currentSelection).trigger('click'); + + return false; + case 40: // down key + if (typeof currentSelection === 'undefined') { + currentSelection = $('div.resultItem:first', results).get(0); + } + else { + currentSelection = $(currentSelection).next().get(0); + } + + setHoverClass(currentSelection); + if (currentSelection) { + $(results).scrollTop(currentSelection.offsetTop); + } + + return false; + case 38: // up key + if (typeof currentSelection === 'undefined') { + currentSelection = $('div.resultItem:last', results).get(0); + } + else { + currentSelection = $(currentSelection).prev().get(0); + } + + setHoverClass(currentSelection); + if (currentSelection) { + $(results).scrollTop(currentSelection.offsetTop); + } + + return false; + default: + runSuggest.apply(this, [e]); + } + } + + // Prepare the input box to show suggest results by adding in the events + // that will initiate the search and placing the element on the page + // that will show the results. + $(results).addClass('jsonSuggestResults'). + css({ + 'top': (obj.position().top + obj.height() + 5) + 'px', + 'left': obj.position().left + 'px', + 'width': settings.width || ((obj.width() + 5) + 'px') + }).hide(); + + obj.after(results). + keyup(keyListener). + blur(function(e) { + // We need to make sure we don't hide the result set + // if the input blur event is called because of clicking on + // a result item. + var resPos = $(results).offset(); + resPos.bottom = resPos.top + $(results).height(); + resPos.right = resPos.left + $(results).width(); + + if (pageY < resPos.top || pageY > resPos.bottom || pageX < resPos.left || pageX > resPos.right) { + $(results).hide(); + } + }). + focus(function(e) { + $(results).css({ + 'top': (obj.position().top + obj.height() + 5) + 'px', + 'left': obj.position().left + 'px' + }); + + if ($('div', results).length > 0) { + $(results).show(); + } + }). + attr('autocomplete', 'off'); + $().mousemove(function(e) { + pageX = e.pageX; + pageY = e.pageY; + }); + + // Opera doesn't seem to assign a keyCode for the down + // key on the keyup event. why? + if ($.browser.opera) { + obj.keydown(function(e) { + if (e.keyCode === 40) { // up key + return keyListener(e); + } + }); + } + + // Escape the not character if present so that it doesn't act in the regular expression + settings.notCharacter = regexEscape(settings.notCharacter || ''); + + // We need to get the javascript array type data from the searchData setting. + // Setting can either be a string, already an array or a function that returns one + // of those things. We only get this data if it isn't being provided using ajax on + // each search + if (!settings.ajaxResults) { + if (typeof searchData === 'function') { + searchData = searchData(); + } + if (typeof searchData === 'string') { + searchData = JSON.parse(searchData); + } + } + }); + }; + +})(jQuery); \ No newline at end of file