Select2 with Other

Select2 with Other Option

by KingGeneral

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
<form action="" id="form-custom">
    <select id="Something" class="form-control select2">
     </select>
</form>

JavaScript

/*
notes

here i am using alasql for searching (LIKE in database)
and select2 for searching

file used : 
- https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js
- http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css
- http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js

solution for stackoverflow issue : 
- https://stackoverflow.com/questions/17950117/select2-when-no-option-matches-other-should-appear/41712008#41712008
*/

// other than this array we will give "other" option
var ajax_search_array = ['zone', 'kg', 'windows', 'uac'];

//settings the select2
$('#Something').select2({
		placeholder: "select items",
		data:[{"id":"zone","text":"Zone"},{"id":"kg","text":"Kg"},{"id":"windows","text":"Windows"},{"id":"uac","text":"Uac"},{"id":"other","text":"Other"}],
    tags: true,
    createTag: function (tag) {
        
        // here we add %search% to search like in mysql
        var name_search  = "%"+tag.term.toString().toLowerCase()+"%";
        
        // alasql search
        var result = alasql('SELECT COLUMN * FROM [?] WHERE [0] LIKE ?',[ajax_search_array, name_search]);
        
        //console.log(JSON.stringify(result));
        //console.log(tag.term);
        
        // if no result found then show "other"
        // and prevent other to appear when type "other"
        if(result==false && tag.term != "other"){
        	return {
              id: "other",
              text: "Other"
          };
        }
    }
});

//reset index -1 to display placeholder
$(".select2").val('').trigger("change");

//show alert every user change the data
$("#Something").change(function() {
		
		if (!$(this).children('option:first-child').is(':selected')) {
			alert('value = '+$("#Something").val());
		}
});