improve select2 style

main/static/css/custom.css

@@ -143,8 +143,24 @@ select[multiple] option {
 	padding: 0.3em 0.5em;
 }
 
-.raw-input {
+.select2 {
+	text-align: left;
+}
 
+.select2-container--bootstrap li {
+	color: #1c557d !important;
+}
+
+.select2-container--bootstrap li a {
+	color: #1c557d !important;
+}
+
+.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
+	background-color: #c3d9ef;
+}
+
+.select2-results__option--load-more {
+	display: none;
 }
 
 .backlog-editor-col1 {

main/static/js/custom.js

@@ -22,17 +22,30 @@ $(document).ready( function () {
 		}
 	});
 	
+	$('.filtered-dropdown').select2({
+		  theme: 'bootstrap',
+		  placeholder: 'Rechercher...',
+		  minimumInputLength: 1,
+		  language: {
+	    	  inputTooShort: function () { return "Veuillez saisir votre recherche..."; },
+	    	  errorLoading: function () { return "Erreur de chargement"; },
+	    	  searching: function () { return "Recherche en cours…"; },
+	    	  noResults: function () { return "Aucun résultat"; },
+	    	  loadingMore: function () { return "Chargement de résultats supplémentaires…"; }
+	      }
+	});
+	
 	$('#search-bar').select2({
+		  theme: 'bootstrap',
 		  placeholder: 'Rechercher...',
-		  language: "fr",
-		  minimumInputLength: 2,
+		  minimumInputLength: 1,
 		  ajax: {
 		    url: '/search/',
 		    dataType: 'json',
 		    cache: true,
-//		    delay: 100
+		    delay: 220
 		  },
-//	      closeOnSelect: false,
+	      closeOnSelect: false,
 	      width : '220px',
 	      templateResult: function (state) { return $('<a href="' + state.id + '">' + state.text + '</a>'); },
 	      language: {
@@ -44,6 +57,11 @@ $(document).ready( function () {
 	      }
 	});
 	
+	$('#search-bar').on('change', function() {
+		event.preventDefault();
+		window.location.href = $(this).first('option').val();
+	});
+	
 	$('#stories').on('change', 'select[data-filter]', function() {
 		
 		var filters = [];
@@ -394,6 +412,4 @@ $(document).ready( function () {
 		}
 	});
 	
-	$('.filtered-dropdown').select2();
-	
 });

main/templates/_layout.html

@@ -21,6 +21,7 @@
 		<link href="{% static 'martor/css/martor.min.css' %}" type="text/css" media="all" rel="stylesheet" />
 
 		<link rel="stylesheet" type="text/css" href="{% static 'css/select2.min.css' %}">
+		<link rel="stylesheet" type="text/css" href="{% static 'css/select2-bootstrap.min.css' %}">
 
 		<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>