//self written functionality to make selects searchable
var searchableselect_selector = "select.searchableselect";
var searchableselect_ini_class = "searchableselect_ini";
function searchableselect(){
$(searchableselect_selector).each(function(){
//if the searchableselect_container is not here yet create it and all the other elements inside
var realselect = $(this);
var searchableselect_container;
if(!realselect.hasClass(searchableselect_ini_class)) {
realselect.addClass(searchableselect_ini_class);
realselect.after('<div class="searchableselect_container"><a href="#" class="searchableselect_select searchableselect_toggler"></a><div class="searchableselect_dropdown"><input type="text" class="searchableselect_searchinput"/><div class="searchableselect_options"></div></div></div>');
searchableselect_container = realselect.next();
searchableselect_container.find(".searchableselect_searchinput").on("input", function() {
var searchterm = $(this).val().toLowerCase();
$(this).closest(".searchableselect_container").find(".searchableselect_option").each(function(){
var optiontext = $(this).text().toLowerCase();
if(optiontext.indexOf(searchterm) !== -1){
$(this).removeClass("searchableselect_option_filtered");
}
else {
$(this).addClass("searchableselect_option_filtered");
}
});
if(searchterm.length > 0) {
var first_unfiltered = $(this).closest(".searchableselect_container").find(".searchableselect_option:not(.searchableselect_option_filtered)").first();
if(first_unfiltered.length > 0 && first_unfiltered.not('.searchableselect_option_selected')) {
$(this).closest(".searchableselect_container").find(".searchableselect_option").removeClass('.searchableselect_option_selected');
first_unfiltered.addClass('searchableselect_option_selected');
var prevselect = $(this).closest(".searchableselect_container").prev();
var valbefore = prevselect.val();
$(this).closest(".searchableselect_container").prev().val(first_unfiltered.attr("data-value"));
if(prevselect.val() != valbefore) {
prevselect.trigger("change");
}
$(this).closest(".searchableselect_container").find(".searchableselect_select").html(first_unfiltered.text());
}
}
});
searchableselect_container.find(".searchableselect_toggler").on("click", function(e) {
e.preventDefault();
if(!$(this).closest(".searchableselect_container").find(".searchableselect_dropdown").hasClass("searchableselect_dropdown_open") && $(".searchableselect_dropdown_open").length > 0){
$(".searchableselect_dropdown_open").removeClass("searchableselect_dropdown_open");
}
$(this).closest(".searchableselect_container").find(".searchableselect_dropdown").toggleClass("searchableselect_dropdown_open");
$(this).closest(".searchableselect_container").find(".searchableselect_dropdown_open .searchableselect_searchinput").focus();
searchableselect_position();
});
//close the dropdown on click somewhere else
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('.searchableselect_dropdown').length && !$target.closest('.searchableselect_toggler').length) {
$('.searchableselect_dropdown').removeClass("searchableselect_dropdown_open");
}
});
}
//always update the options - in case something changed
searchableselect_container = realselect.next();
var selected = false;
if(realselect.find("option:selected").length > 0) {
selected = realselect.find("option:selected").val();
}
searchableselect_container.find(".searchableselect_options").html("");
searchableselect_container.find(".searchableselect_select").html("");
realselect.find("option").each(function() {
if($(this).prop('disabled') != true){
searchableselect_container.find(".searchableselect_options").append('<a class="searchableselect_option" href="#" data-value="'+this.value+'" onclick="event.preventDefault();$(this).closest(\'.searchableselect_container\').find(\'.searchableselect_searchinput\').val(\'\');$(this).closest(\'.searchableselect_dropdown\').removeClass(\'searchableselect_dropdown_open\');$(this).closest(\'.searchableselect_container\').prev().val(\''+this.value+'\').trigger(\'change\');">'+this.text+'</a>');
}
});
if(selected !== false){
var selectedoption = searchableselect_container.find('.searchableselect_option[data-value="'+selected+'"]');
if(selectedoption.length > 0) {
selectedoption.addClass("searchableselect_option_selected");
searchableselect_container.find(".searchableselect_select").html(selectedoption.text());
}
}
if(searchableselect_container.find(".searchableselect_select").html() == "" && realselect.find('option[value="unselected"]')){
searchableselect_container.find(".searchableselect_select").html(realselect.find('option[value="unselected"]').text());
}
searchableselect_container.find(".searchableselect_searchinput").trigger("input");
});
}
function searchableselect_position(){
$(".searchableselect_dropdown_open").each(function(){
var container = $(this).closest(".searchableselect_container");
var top = container.offset().top - $(window).scrollTop();
var left = container.offset().left;
var right = $(window).width() - left - container.outerWidth();
$(this).css("top", top + "px");
$(this).css("left", left + "px");
$(this).css("right", right + "px");
$(this).css("width", "auto");
});
}
$(function(){
searchableselect();
});