ajax-chosen.coffee | |
|---|---|
do ($ = jQuery) ->\n\n $.fn.ajaxChosen = (settings = {}, callback = ->) ->\n defaultOptions =\n minTermLength: 3\n afterTypeDelay: 500\n jsonTermKey: "term" | |
| This will come in handy later. | select = @\n \n chosenXhr = null\n |
| Merge options with defaults | options = $.extend {}, defaultOptions, settings |
| Load chosen. To make things clear, I have taken the liberty\nof using the .chzn-autoselect class to specify input elements\nwe want to use with ajax autocomplete. | @chosen()\n \n @each -> |
| Now that chosen is loaded normally, we can bootstrap it with\nour ajax autocomplete code. | $(@).next('.chzn-container')\n .find(".search-field > input, .chzn-search > input")\n .bind 'keyup', -> |
| This code will be executed every time the user types a letter\ninto the input form that chosen has created | |
| Retrieve the current value of the input form | val = $.trim $(@).attr('value') |
| Depending on how much text the user has typed, let them know\nif they need to keep typing or if we are looking for their data | msg = if val.length < options.minTermLength then "Keep typing..." else "Looking for '" + val + "'"\n select.next('.chzn-container').find('.no-results').text(msg)\n |
| If input text has not changed ... do nothing | return false if val is $(@).data('prevVal') |
| Set the current search term so we don't execute the ajax call if\nthe user hits a key that isn't an input letter/number/symbol | $(@).data('prevVal', val)\n |
| At this point, we have a new term/query ... the old timer\nis no longer valid. Clear it. | |
| We delay searches by a small amount so that we don't flood the\nserver with ajax requests. | clearTimeout(@timer) if @timer\n |
| Some simple validation so we don't make excess ajax calls. I am\nassuming you don't want to perform a search with less than 3\ncharacters. | return false if val.length < options.minTermLength\n |
| This is a useful reference for later | field = $(@)\n |
| Default term key is | options.data = {} if not options.data?\n options.data[options.jsonTermKey] = val\n |
| If the user provided an ajax success callback, store it so we can\ncall it after our bootstrapping is finished. | success ?= options.success\n |
| Create our own callback that will be executed when the ajax call is\nfinished. | options.success = (data) -> |
| Exit if the data we're given is invalid | return if not data?\n |
| Go through all of the | selected_values = []\n select.find('option').each -> \n if not $(@).is(":selected")\n $(@).remove() \n else\n selected_values.push $(@).val() + "-" + $(@).text()\n |
| Send the ajax results to the user callback so we can get an object of\nvalue => text pairs to inject as | items = callback data\n |
| Iterate through the given data and inject the | $.each items, (value, text) ->\n if $.inArray(value + "-" + text, selected_values) == -1\n $("<option />")\n .attr('value', value)\n .html(text)\n .appendTo(select)\n |
| Tell chosen that the contents of the | select.trigger("liszt:updated")\n |
| Finally, call the user supplied callback (if it exists) | success(data) if success? |
| For some reason, the contents of the input field get removed once you\ncall trigger above. Often, this can be very annoying (and can make some\nsearches impossible), so we add the value the user was typing back into\nthe input field. | field.attr('value', val) |
| Because non-ajax Chosen isn't constantly re-building results, when it\nDOES rebuild results (during liszt:updated above, it clears the input \nsearch field before scaling it. This causes the input field width to be \nat it's minimum, which is about 25px. | |
| The proper way to fix this would be create a new method in chosen for\nrebuilding results without clearing the input field. Or to call \nChosen.searchfieldscale() after resetting the value above. This isn't\npossible with the current state of Chosen. The quick fix is to simply reset\nthe width of the field after we reset the value of the input text. | field.css('width','auto')\n |
| Execute the ajax call to search for autocomplete data with a timer | @timer = setTimeout -> \n chosenXhr.abort() if chosenXhr\n chosenXhr = $.ajax(options)\n , options.afterTypeDelay\n\n |