Add library to improve user selection when sharing

.idea/friends_map.iml

@@ -17,6 +17,7 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="leaflet" level="application" />
+    <orderEntry type="library" name="bootstrap-select" level="application" />
   </component>
   <component name="TemplatesService">
     <option name="TEMPLATE_CONFIGURATION" value="Django" />

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{leaflet}" />
+    <file url="file://$PROJECT_DIR$" libraries="{bootstrap-select, leaflet}" />
   </component>
 </project>

map/forms.py

@@ -38,7 +38,10 @@ class LocationSharingForm(forms.ModelForm):
         self.fields['shares_location_to'].label = 'Share location to'
         self.fields['shares_location_to'].help_text = 'Hold <kbd>Ctrl</kbd> or <kbd>Cmd</kbd> to select multiple users'
         self.fields['shares_location_to'].widget.attrs = {
-            'size': 10,
+            'data-size': 20,
+            'class': 'selectpicker',
+            'data-live-search': 'true',
+            'data-actions-box': 'true',
         }
 
 

map/templates/map/share_location.html

@@ -13,3 +13,12 @@
         </div>
     </div>
 {% endblock %}
+
+{% block add-head %}
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
+{% endblock %}
+
+{% block js %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
+{% endblock %}