Created a custom JQuery-UI widget for dynamic lookup fields. Fixes #39

events/templates/forms/widgets/lookup.html

@@ -1,4 +1,3 @@
-<input autocomplete="false" id="{{ widget.name }}_search" name="{{ widget.name }}_search" style="width: 100px"/>
 <select autocomplete="false" id="{{ widget.name }}_select" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %} style="width: 200px">
 	{{ widget.value }}
 </select>

get_together/static/js/jquery-ui-lookup.js

@@ -0,0 +1,46 @@
+/*!
+ * jQuery UI Lookup 1.0
+ *
+ * Copyright 2018, Michael Hall <mhall119@gmail.com>
+ * Licensed under the MIT
+ *
+ */
+
+(function ($) {
+
+    $.widget('ui.lookup', $.ui.selectmenu, {
+
+        options: $.extend({}, $.ui.selectmenu.prototype.options, {
+            search: null
+        }),
+
+        _drawMenu: function() {
+            this._super();
+            this._drawSearch();
+        },
+
+        _drawSearch: function() {
+            var self = this;
+            var selectField = this.element[0];
+            this.searchField = $('<input type="text" placeholder="Search" style="width: 100%;">');
+            //this._addClass( this.searchField, "ui-selectmenu-menu", "ui-front" );
+            this.searchField.keyup(function() {
+                self.options.search(this.value, function(searchText, results){
+                    if (searchText != self.searchField[0].value) return ;
+
+                    self.element.empty();
+                    var selected = " selected"
+                    self.element.append('<option value="">--------</option>')
+                    $.each(results, function(){
+                        self.element.append('<option value="'+ this.id +'"'+ selected +'>'+ this.display + '</option>');
+                        selected="";
+                    });
+                    self.element.lookup("refresh");
+                });
+            });
+            this.menuWrap.prepend(this.searchField);
+        }
+
+    });
+
+}(jQuery));

get_together/templates/get_together/base.html

@@ -97,8 +97,8 @@ form {
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 {% block javascript %}{% endblock %}
 </html>

get_together/templates/get_together/index.html

@@ -103,35 +103,28 @@
 {% endblock %}
 
 {% block javascript %}
+<script src="{% static 'js/jquery-ui-lookup.js' %}"></script>
 <script type="text/javascript">
 $(document).ready(function(){
+    $("#city_select").lookup({
+        search: function(searchText, callback) {
+        if (searchText.length < 3) return callback(searchText, []);
+            $.getJSON("/api/cities/?q="+searchText, function(data) {
+                var m = this.url.match(/q=([^&]+)/);
+                var q = "";
+                if (m && m.length > 0) {
+                    q = this.url.match(/q=([^&]+)/)[1]
+                }
 
+                return callback(q, data);
+            });
+        }
+    })
     $("#city_search").keyup(function() {
         var searchText = this.value;
-        if (searchText.length < 3) return;
-        $.getJSON("/api/cities/?q="+searchText, function(data) {
-            var searchField = $("#city_search")[0];
-            var m = this.url.match(/q=([^&]+)/);
-            var q = "";
-            if (m && m.length > 0) {
-                q = this.url.match(/q=([^&]+)/)[1]
-            }        var c = searchField.value
-            if (c != q) return;
-
-            var selectField = $("#city_select");
-            selectField.empty();
-            var selected = " selected"
-            selectField.append('<option value="">--------</option>')
-            $.each(data, function(){
-                selectField.append('<option value="'+ this.id +'"'+ selected +'>'+ this.display + '</option>');
-                selected="";
-            });
-        });
     });
 
 });
-
-
 </script>
 
 {% endblock %}

get_together/templates/get_together/places/create_place.html

@@ -1,5 +1,5 @@
 {% extends "get_together/base.html" %}
-
+{% load static %}
 {% block content %}
 <div class="container">
     <div class="row">
@@ -198,27 +198,27 @@ $("#map").selectLocation({
     html_lat: $("#id_latitude"),
     html_lng: $("#id_longitude")
 });
+</script>
 
+<script src="{% static 'js/jquery-ui-lookup.js' %}"></script>
+<script type="text/javascript">
 $(document).ready(function(){
-$("#city_search").keyup(function() {
+    $("#city_select").lookup({
-       var searchText = this.value;
+        search: function(searchText, callback) {
-    if (searchText.length < 3) return;
+        if (searchText.length < 3) return callback(searchText, []);
-       $.getJSON("/api/cities/?q="+searchText, function(data) {
+            $.getJSON("/api/cities/?q="+searchText, function(data) {
-           var searchField = $("#city_search")[0];
+                var m = this.url.match(/q=([^&]+)/);
-           var q = this.url.match(/q=([^&]+)/)[1]
+                var q = "";
-           var c = searchField.value
+                if (m && m.length > 0) {
-           if (c != q) return;
+                    q = this.url.match(/q=([^&]+)/)[1]
+                }
 
-           var selectField = $("#city_select");
+                return callback(q, data);
-           selectField.empty();
-            var selected = " selected"
-            selectField.append('<option value="">--------</option>')
-            $.each(data, function(){
-                selectField.append('<option value="'+ this.id +'"'+ selected +'>'+ this.display + '</option>');
-                selected="";
             });
-         });
+        }
-    });
+    })
+    $("#id_tz").selectmenu();
 });
+
 </script>
 {% endblock %}

get_together/templates/get_together/teams/create_team.html

@@ -1,45 +1,37 @@
 {% extends "get_together/base.html" %}
+{% load static %}
 
 {% block content %}
 <h2>Get Together with friends</h2>
-<form action="{% url "create-team" %}" method="post">
+<form action="{% url "create-team" %}" method="post" class="form">
 {% csrf_token %}
 {% include "events/team_form.html" %}
+
 	<br />
 <button type="submit" class="btn btn-primary">Gather your Team</button>
 </form>
 {% endblock %}
 
 {% block javascript %}
+<script src="{% static 'js/jquery-ui-lookup.js' %}"></script>
 <script type="text/javascript">
 $(document).ready(function(){
+    $("#city_select").lookup({
+        search: function(searchText, callback) {
+        if (searchText.length < 3) return callback(searchText, []);
+            $.getJSON("/api/cities/?q="+searchText, function(data) {
+                var m = this.url.match(/q=([^&]+)/);
+                var q = "";
+                if (m && m.length > 0) {
+                    q = this.url.match(/q=([^&]+)/)[1]
+                }
 
-    $("#city_search").keyup(function() {
+                return callback(q, data);
-        var searchText = this.value;
-        if (searchText.length < 3) return;
-        $.getJSON("/api/cities/?q="+searchText, function(data) {
-            var searchField = $("#city_search")[0];
-            var m = this.url.match(/q=([^&]+)/);
-            var q = "";
-            if (m && m.length > 0) {
-                q = this.url.match(/q=([^&]+)/)[1]
-            }        var c = searchField.value
-            if (c != q) return;
-
-            var selectField = $("#city_select");
-            selectField.empty();
-            var selected = " selected"
-            selectField.append('<option value="">--------</option>')
-            $.each(data, function(){
-                selectField.append('<option value="'+ this.id +'"'+ selected +'>'+ this.display + '</option>');
-                selected="";
             });
-        });
+        }
-    });
+    })
-
+    $("#id_tz").selectmenu();
 });
-
-
 </script>
 
 {% endblock %}

get_together/templates/get_together/teams/edit_team.html

@@ -1,5 +1,5 @@
 {% extends "get_together/base.html" %}
-
+{% load static %}
 {% block content %}
 <h2>Update {{team.name}}</h2>
 <form action="{% url "edit-team" team.id %}" method="post">
@@ -12,33 +12,26 @@
 {% endblock %}
 
 {% block javascript %}
+<script src="{% static 'js/jquery-ui-lookup.js' %}"></script>
 <script type="text/javascript">
 $(document).ready(function(){
+    $("#city_select").lookup({
+        search: function(searchText, callback) {
+        if (searchText.length < 3) return callback(searchText, []);
+            $.getJSON("/api/cities/?q="+searchText, function(data) {
+                var m = this.url.match(/q=([^&]+)/);
+                var q = "";
+                if (m && m.length > 0) {
+                    q = this.url.match(/q=([^&]+)/)[1]
+                }
 
-    $("#city_search").keyup(function() {
+                return callback(q, data);
-        var searchText = this.value;
-        if (searchText.length < 3) return;
-        $.getJSON("/api/cities/?q="+searchText, function(data) {
-            var searchField = $("#city_search")[0];
-            var m = this.url.match(/q=([^&]+)/);
-            var q = "";
-            if (m && m.length > 0) {
-                q = this.url.match(/q=([^&]+)/)[1]
-            }        var c = searchField.value
-            if (c != q) return;
-
-            var selectField = $("#city_select");
-            selectField.empty();
-            var selected = " selected"
-            selectField.append('<option value="">--------</option>')
-            $.each(data, function(){
-                selectField.append('<option value="'+ this.id +'"'+ selected +'>'+ this.display + '</option>');
-                selected="";
             });
-        });
+        }
-    });
+    })
-
+    $("#id_tz").selectmenu();
 });
+
 </script>
 
 {% endblock %}