diff --git a/content/styles.css b/content/styles.css index a2719e4..3d11589 100644 --- a/content/styles.css +++ b/content/styles.css @@ -1,10 +1,9 @@ body { font-family: sans-serif; font-size: 14px; line-height: 1.6em; margin: 0; padding: 0; } .container { width: 800px; margin: 0 auto; } -.autocomplete-w1 { position: absolute; top: 0px; left: 0px; } -.autocomplete { border: 1px solid #999; background: #FFF; cursor: default; text-align: left; max-height: 350px; overflow: auto; /* IE6 specific: */ _height: 350px; _margin: 0; _overflow-x: hidden; } - .autocomplete-selected { background: #F0F0F0; } - .autocomplete div { padding: 2px 5px; white-space: nowrap; overflow: hidden; } - .autocomplete strong { font-weight: normal; color: #3399FF; } +.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; } +.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } +.autocomplete-selected { background: #F0F0F0; } +.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } -input { font-size: 28px; padding: 10px; border: 1px solid #CCC; display: block; margin: 20px 0; } \ No newline at end of file +input { font-size: 28px; padding: 10px; border: 1px solid #CCC; display: block; margin: 20px 0; } diff --git a/dist/jquery.autocomplete.js b/dist/jquery.autocomplete.js index 5aab395..e9e4f53 100644 --- a/dist/jquery.autocomplete.js +++ b/dist/jquery.autocomplete.js @@ -5,7 +5,7 @@ * Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license. * For details, see the web site: http://www.devbridge.com/projects/autocomplete/jquery/ * -* Last Review: 12/18/2012 +* Last Review: 12/19/2012 */ /*jslint browser: true, white: true, plusplus: true, vars: true */ @@ -51,18 +51,19 @@ function Autocomplete(el, options) { var that = this, defaults = { + serviceUrl: null, + lookup: null, + onSelect: null, + width: 'auto', minChars: 1, maxHeight: 300, deferRequestBy: 0, - width: 0, - highlight: true, params: {}, formatResult: Autocomplete.formatResult, delimiter: null, zIndex: 9999, type: 'GET', - noCache: false, - enforce: false + noCache: false }; // Shared variables: @@ -124,7 +125,7 @@ this.options.width = this.el.outerWidth(); } - this.suggestionsContainer = Autocomplete.utils.createNode(''); + this.suggestionsContainer = Autocomplete.utils.createNode(''); var container = $(this.suggestionsContainer); @@ -165,17 +166,14 @@ this.isLocal = $.isArray(options.lookup); - // Transform lookup array if it's string array: - if (this.isLocal && typeof options.lookup[0] === 'string') { - options.lookup = $.map(options.lookup, function (value) { - return { value: value, data: null }; - }); + if (this.isLocal) { + options.lookup = this.verifySuggestionsFormat(options.lookup); } // Adjust height, width and z-index: $(this.suggestionsContainer).css({ 'max-height': options.maxHeight + 'px', - 'width': options.width, + 'width': options.width + 'px', 'z-index': options.zIndex }); }, @@ -277,17 +275,18 @@ return; } - clearInterval(this.onChangeInterval); + var that = this; - if (this.currentValue !== this.el.val()) { - if (this.options.deferRequestBy > 0) { + clearInterval(that.onChangeInterval); + + if (that.currentValue !== that.el.val()) { + if (that.options.deferRequestBy > 0) { // Defer lookup in case when value changes very quickly: - var me = this; - this.onChangeInterval = setInterval(function () { - me.onValueChange(); - }, this.options.deferRequestBy); + that.onChangeInterval = setInterval(function () { + that.onValueChange(); + }, that.options.deferRequestBy); } else { - this.onValueChange(); + that.onValueChange(); } } }, @@ -295,6 +294,7 @@ onValueChange: function () { clearInterval(this.onChangeInterval); this.currentValue = this.element.value; + var q = this.getQuery(this.currentValue); this.selectedIndex = -1; @@ -379,21 +379,17 @@ return; } - var len = this.suggestions.length, - formatResults = this.options.formatResult, + var formatResult = this.options.formatResult, value = this.getQuery(this.currentValue), - suggestion, className = this.classes.suggestion, classSelected = this.classes.selected, container = $(this.suggestionsContainer), - html = '', - i; + html = ''; // Build suggestions inner HTML: - for (i = 0; i < len; i++) { - suggestion = this.suggestions[i]; - html += '
' + formatResults(suggestion, value) + '
'; - } + $.each(this.suggestions, function (i, suggestion) { + html += '
' + formatResult(suggestion, value) + '
'; + }); container.html(html).show(); this.visible = true; @@ -403,16 +399,22 @@ container.children().first().addClass(classSelected); }, - processResponse: function (text) { - var response = $.parseJSON(text); - + verifySuggestionsFormat: function (suggestions) { // If suggestions is string array, convert them to supported format: - if (typeof response.suggestions[0] === 'string') { - response.suggestions = $.map(response.suggestions, function (value) { + if (suggestions.length && typeof suggestions[0] === 'string') { + return $.map(suggestions, function (value) { return { value: value, data: null }; }); } + return suggestions; + }, + + processResponse: function (text) { + var response = $.parseJSON(text); + + response.suggestions = this.verifySuggestionsFormat(response.suggestions); + // Cache results if cache is not disabled: if (!this.options.noCache) { this.cachedResponse[response.query] = response; @@ -458,23 +460,6 @@ } }, - change: function (i) { - var onChange, - me = this, - selectedValue = this.suggestions[i], - suggestion; - - if (selectedValue) { - suggestion = me.suggestions[i]; - me.el.val(me.getValue(suggestion.value)); - - onChange = me.options.onChange; - if ($.isFunction(onChange)) { - onChange(suggestion, me.el); - } - } - }, - moveUp: function () { if (this.selectedIndex === -1) { return; diff --git a/dist/jquery.autocomplete.min.js b/dist/jquery.autocomplete.min.js index 9769e60..471623d 100644 --- a/dist/jquery.autocomplete.min.js +++ b/dist/jquery.autocomplete.min.js @@ -1,2 +1,2 @@ -(function(n){"use strict";function t(i,r){var u=this,f={minChars:1,maxHeight:300,deferRequestBy:0,width:0,highlight:!0,params:{},formatResult:t.formatResult,delimiter:null,zIndex:9999,type:"GET",noCache:!1,enforce:!1};u.element=i,u.el=n(i),u.suggestions=[],u.badQueries=[],u.selectedIndex=-1,u.currentValue=u.element.value,u.intervalId=0,u.cachedResponse=[],u.onChangeInterval=null,u.onChange=null,u.ignoreValueChange=!1,u.isLocal=!1,u.suggestionsContainer=null,u.options=f,u.classes={selected:"autocomplete-selected",suggestion:"autocomplete-suggestion"},u.initialize(),u.setOptions(r)}var i=function(){return{extend:function(t,i){return n.extend(t,i)},addEvent:function(n,t,i){if(n.addEventListener)n.addEventListener(t,i,!1);else if(n.attachEvent)n.attachEvent("on"+t,i);else throw new Error("Browser doesn't support addEventListener or attachEvent");},removeEvent:function(n,t,i){n.removeEventListener?n.removeEventListener(t,i,!1):n.detachEvent&&n.detachEvent("on"+t,i)},createNode:function(n){var t=document.createElement("div");return t.innerHTML=n,t.firstChild}}}();t.utils=i,n.Autocomplete=t,t.formatResult=function(n,t){var i=new RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\)","g"),r="("+t.replace(i,"\\$1")+")";return n.value.replace(new RegExp(r,"gi"),"$1<\/strong>")},t.prototype={killerFn:null,initialize:function(){var i=this,u="."+i.classes.suggestion,r;this.element.setAttribute("autocomplete","off"),this.killerFn=function(t){n(t.target).closest(".autocomplete").length===0&&(i.killSuggestions(),i.disableKillerFn())},this.options.width&&this.options.width!=="auto"||(this.options.width=this.el.outerWidth()),this.suggestionsContainer=t.utils.createNode('