From 37cd5f9498709bd5245f64b24686cc68720b1987 Mon Sep 17 00:00:00 2001
From: Markus Ankenbrand <markus@ankenbrand.me>
Date: Tue, 21 Feb 2017 00:02:41 +0100
Subject: [PATCH] Switch from multi select to jquery-ui selectable

---
 js/page-pins-map.js | 9 +++++----
 page-pins.php       | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/js/page-pins-map.js b/js/page-pins-map.js
index 3b0e36b..278248b 100644
--- a/js/page-pins-map.js
+++ b/js/page-pins-map.js
@@ -4,11 +4,12 @@ var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['
 var traveler = page_pins_map.traveler;
 jQuery('document').ready(function(){
     for(var i=0; i<traveler.length; i++){
-        var opt = document.createElement('OPTION');
-        var optTxt = document.createTextNode(traveler[i]);
-        opt.appendChild(optTxt);
-        document.getElementById('travelers-select').appendChild(opt);
+        var opt = jQuery('<li>');
+        opt.addClass('ui-widget-content');
+        opt.text(traveler[i]);
+        jQuery('#travelers-select').append(opt);
     }
+    jQuery( "#travelers-select" ).selectable();
     if(typeof google !== 'undefined'){
         // reinit map in case google maps loaded before this script did
         initMap();
diff --git a/page-pins.php b/page-pins.php
index 1e147f6..84bcd31 100644
--- a/page-pins.php
+++ b/page-pins.php
@@ -32,7 +32,7 @@
 			    
 			    	<?php the_content(); ?>
 
-                <select name="travelers" id="travelers-select" multiple></select>
+                <ul id="travelers-select"></ul>
                 <div class="button" style="color:white" id="travelers-filter-button" onclick="filterByTravelerClick();">Filter</div>
 					
 			    	<?php wp_link_pages('before=<div class="clear"></div><p class="page-links">' . __( 'Pages:', 'hitchcock' ) . ' &after=</p>&seperator= <span class="sep">/</span> '); ?>
@@ -78,7 +78,7 @@
             }
         }
     endwhile;
-    wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery'));
+    wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery', 'jquery-ui-selectable'));
     wp_localize_script('page_pins_map', 'page_pins_map', array('places' => $locations, 'traveler' => array_values($traveler)));
 ?>