diff --git a/README.md b/README.md index e0f6c32..4308b04 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,13 @@ ajaxChosen specific parameters are: - minLength: this is the number of characters that need to be typed before search occurs. Default is 3. - queryLimit: this is the max number of items that your server will ever return, and it is used for client side caching. Default is 10. - delay: time to wait between key strokes +- chosenOptions: passed to vanilla chosen +- searchingText: "Searching..." +- noresultsText: "No results." +- initialQuery: boolean of wether or not to fire a query when the chosen is first focused -The second argument is a callback that the plugin uses to get option elements. The callback is expected to make ajax call, it receives as first argument the options of plugin and must call its second argument to pass the values back to the plugin, e.g. if it were a list of states it would be +The second argument is a callback that the plugin uses to get option elements. The callback is passed the set options, the response callback, and the event that triggered the callback (focus or keyup). The callback is expected to make ajax call, it receives as first argument the options of plugin and must call its second argument to pass the values back to the plugin, e.g. if it were a list of states it would be states[state.id] = state.name; @@ -25,14 +29,20 @@ which would become +You can use the event parameter to differentiate between initialQuery and subsequent queries to change behavior accordingly ## Example Code ``` js $("#example-input").ajaxChosen({ - minLength: 2, - delay: 300 -}, function (options, response) { + minLength: 3, + queryLimit: 10, + delay: 100, + chosenOptions: {}, + searchingText: "Searching...", + noresultsText: "No results.", + initialQuery: false +}, function (options, response, event) { $.getJSON("/ajax-chosen/data.php", {q: options.term}, function (data) { var terms = {}; @@ -44,6 +54,4 @@ $("#example-input").ajaxChosen({ response(terms); }); }); -``` - -Note that this will hit the url: /ajax-chosen/data.php?q=WHATEVS (assuming you're searching for whatevs...) +``` \ No newline at end of file diff --git a/lib/ajax-chosen.js b/lib/ajax-chosen.js index 1daeb23..72dfbad 100644 --- a/lib/ajax-chosen.js +++ b/lib/ajax-chosen.js @@ -1,139 +1,143 @@ - /* ajax-chosen A complement to the jQuery library Chosen that adds ajax autocomplete +Contributors: +https://github.com/jobvite/ajax-chosen https://github.com/bicouy0/ajax-chosen */ - -(function() { - - (function($) { - return $.fn.ajaxChosen = function(options, callback) { - var defaultedOptions, inputSelector, multiple, select; - defaultedOptions = { - minLength: 3, - queryLimit: 10, - delay: 100, - chosenOptions: {}, - searchingText: "Searching...", - noresultsText: "No results." +(function($) { + return $.fn.ajaxChosen = function(options, callback) { + var clickSelector, container, defaultedOptions, field, inputSelector, multiple, search, select, + _this = this; + defaultedOptions = { + minLength: 3, + delay: 100, + chosenOptions: {}, + searchingText: "Searching...", + noresultsText: "No results.", + initialQuery: false + }; + $.extend(defaultedOptions, options); + defaultedOptions.chosenOptions.no_results_text = defaultedOptions.searchingText; + select = this; + multiple = select.attr('multiple') != null; + if (multiple) { + inputSelector = ".search-field > input"; + clickSelector = ".chzn-choices"; + } else { + inputSelector = ".chzn-search > input"; + clickSelector = ".chzn-single"; + } + select.chosen(defaultedOptions.chosenOptions); + container = select.next('.chzn-container'); + field = container.find(inputSelector); + if (defaultedOptions.initialQuery) { + field.bind('focus', function(evt) { + if (this.previousSearch || !container.hasClass('chzn-container-active')) { + return; + } + return search(evt); + }); + } + field.bind('keyup', function(evt) { + if (this.previousSearch) clearTimeout(this.previousSearch); + return this.previousSearch = setTimeout((function() { + return search(evt); + }), defaultedOptions.delay); + }); + return search = function(evt) { + var clearSearchingLabel, currentOptions, prevVal, response, val, _ref; + val = $.trim(field.attr('value')); + prevVal = (_ref = field.data('prevVal')) != null ? _ref : false; + field.data('prevVal', val); + clearSearchingLabel = function() { + var resultsDiv; + if (multiple) { + resultsDiv = field.parent().parent().siblings(); + } else { + resultsDiv = field.parent().parent(); + } + return resultsDiv.find('.no-results').html(defaultedOptions.noresultsText + " '" + $(_this).attr('value') + "'"); }; - $.extend(defaultedOptions, options); - defaultedOptions.chosenOptions.no_results_text = defaultedOptions.searchingText; - select = this; - multiple = select.attr('multiple') != null; - if (multiple) { - inputSelector = ".search-field > input"; - } else { - inputSelector = ".chzn-search > input"; + if (val === prevVal || (val.length < defaultedOptions.minLength && evt.type === 'keyup')) { + clearSearchingLabel(); + return false; } - select.chosen(defaultedOptions.chosenOptions); - return select.next('.chzn-container').find(inputSelector).bind('keyup', function(e) { - var search, - _this = this; - if (this.previousSearch) clearTimeout(this.previousSearch); - search = function() { - var clearSearchingLabel, currentOptions, field, prevVal, response, val, _ref; - field = $(_this); - val = $.trim(field.attr('value')); - prevVal = (_ref = field.data('prevVal')) != null ? _ref : ''; - field.data('prevVal', val); - clearSearchingLabel = function() { - var resultsDiv; - if (multiple) { - resultsDiv = field.parent().parent().siblings(); - } else { - resultsDiv = field.parent().parent(); - } - return resultsDiv.find('.no-results').html(defaultedOptions.noresultsText + " '" + $(_this).attr('value') + "'"); - }; - if (val.length < defaultedOptions.minLength || val === prevVal) { - clearSearchingLabel(); - return false; + currentOptions = select.find('option'); + defaultedOptions.term = val; + response = function(items, success) { + var currentOpt, keydownEvent, latestVal, newOpt, newOptions, noResult, _fn, _fn2, _i, _j, _len, _len2; + if (!field.is(':focus') && evt.type === 'keyup') return; + newOptions = []; + $.each(items, function(value, text) { + var newOpt; + newOpt = $('