Created
November 20, 2015 15:49
-
-
Save bigos/f3cd5348d248ddd23678 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// fix autocomplete | |
/* | |
* Unobtrusive autocomplete | |
* | |
* To use it, you just have to include the HTML attribute autocomplete | |
* with the autocomplete URL as the value | |
* | |
* Example: | |
* <input type="text" data-autocomplete="/url/to/autocomplete"> | |
* | |
* Optionally, you can use a jQuery selector to specify a field that can | |
* be updated with the element id whenever you find a matching value | |
* | |
* Example: | |
* <input type="text" data-autocomplete="/url/to/autocomplete" data-id-element="#id_field"> | |
*/ | |
(function(jQuery) | |
{ | |
var self = null; | |
var options = {}; | |
jQuery.fn.railsAutocomplete = function() { | |
var handler = function() { | |
if (!this.railsAutoCompleter) { | |
this.railsAutoCompleter = new jQuery.railsAutocomplete(this); | |
} | |
}; | |
options[this.selector.replace('#', '')] = arguments[0]; | |
if (jQuery.fn.on !== undefined) { | |
return $(document).on('focus',this.selector,handler); | |
} | |
else { | |
return this.live('focus',handler); | |
} | |
}; | |
jQuery.railsAutocomplete = function (e) { | |
_e = e; | |
this.init(_e); | |
}; | |
jQuery.railsAutocomplete.fn = jQuery.railsAutocomplete.prototype = { | |
railsAutocomplete: '0.0.2' | |
}; | |
jQuery.railsAutocomplete.fn.extend = jQuery.railsAutocomplete.extend = jQuery.extend; | |
jQuery.railsAutocomplete.fn.extend({ | |
init: function(e) { | |
e.delimiter = jQuery(e).attr('data-delimiter') || null; | |
function split( val ) { | |
return val.split( e.delimiter ); | |
} | |
function extractLast( term ) { | |
return split( term ).pop().replace(/^\s+/,""); | |
} | |
jQuery(e).autocomplete($.extend({ | |
source: function( request, response ) { | |
jQuery.getJSON( jQuery(e).attr('data-autocomplete'), { | |
term: extractLast( request.term ) | |
}, function() { | |
if(arguments[0].length == 0) { | |
var label = "No existing matches"; | |
if(jQuery(e).attr('data-autocomplete-label') !== undefined) { | |
label = jQuery(e).attr('data-autocomplete-label'); | |
} | |
arguments[0] = []; | |
arguments[0][0] = { id: "", label: label }; | |
} | |
jQuery(arguments[0]).each(function(i, el) { | |
var obj = {}; | |
obj[el.id] = el; | |
jQuery(e).data(obj); | |
}); | |
response.apply(null, arguments); | |
}); | |
}, | |
change: function( event, ui ) { | |
if(jQuery(jQuery(this).attr('data-id-element')).val() == "") { | |
return; | |
} | |
jQuery(jQuery(this).attr('data-id-element')).val(ui.item ? ui.item.id : ""); | |
var update_elements = false; | |
if (jQuery(this).attr('data-update-elements')) { | |
update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements")); | |
} | |
var data = ui.item ? jQuery(this).data(ui.item.id.toString()) : {}; | |
if(update_elements && jQuery(update_elements['id']).val() == "") { | |
return; | |
} | |
// alert('going to clear the data'); | |
for (var key in update_elements) { | |
// field not empty | |
if ( jQuery(update_elements[key]).val() ) { | |
// do nothing, thus preserving previously entered data | |
} else { | |
jQuery(update_elements[key]).val(ui.item ? data[key] : ""); | |
} | |
} | |
}, | |
minLength: 2, | |
focus: function() { | |
// prevent value inserted on focus | |
return false; | |
}, | |
select: function( event, ui ) { | |
var terms = split( this.value ); | |
// remove the current input | |
terms.pop(); | |
// add the selected item only if it has something | |
if (ui.item.id != ""){ | |
terms.push( ui.item.value ); | |
} | |
// add placeholder to get the comma-and-space at the end | |
if (e.delimiter != null) { | |
terms.push( "" ); | |
this.value = terms.join( e.delimiter ); | |
} else { | |
this.value = terms.join(""); | |
if (jQuery(this).attr('data-id-element')) { | |
jQuery(jQuery(this).attr('data-id-element')).val(ui.item.id); | |
} | |
if (jQuery(this).attr('data-update-elements')) { | |
var data = jQuery(this).data(ui.item.id.toString()); | |
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements")); | |
// console.log(data); | |
// alert('overwriting with json data or blanking everything if no match found ' +update_elements); | |
for (var key in update_elements) { | |
// field not empty | |
if ( jQuery(update_elements[key]).val() ) { | |
// overwrite only if record found in the db | |
if (data['id']) { | |
jQuery(update_elements[key]).val(data[key]); | |
} | |
} else { | |
jQuery(update_elements[key]).val(data[key]); | |
} | |
} | |
} | |
} | |
var remember_string = this.value; | |
jQuery(this).bind('keyup.clearId', function(){ | |
if(jQuery(this).val().trim() != remember_string.trim()){ | |
jQuery(jQuery(this).attr('data-id-element')).val(""); | |
jQuery(this).unbind('keyup.clearId'); | |
} | |
}); | |
jQuery(e).trigger('railsAutocomplete.select', ui); | |
return false; | |
} | |
}, options[e.id])); | |
} | |
}); | |
jQuery(document).ready(function(){ | |
jQuery('input[data-autocomplete]').railsAutocomplete(); | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment