Created a custom JQuery-UI widget for dynamic lookup fields. Fixes #39
This commit is contained in:
Michael Hall
parent
db7eda85cf
commit
c07f6fdb7c
8 changed files with 18819 additions and 90 deletions
|
|
@ -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>
|
||||
|
|
|
|||
46
get_together/static/js/jquery-ui-lookup.js
vendored
Normal file
46
get_together/static/js/jquery-ui-lookup.js
vendored
Normal file
|
|
@ -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));
|
||||
18706
get_together/static/js/jquery-ui.js
vendored
Normal file
18706
get_together/static/js/jquery-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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/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/jquery/3.3.1/jquery.js"></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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
var searchText = this.value;
|
||||
if (searchText.length < 3) return;
|
||||
$.getJSON("/api/cities/?q="+searchText, function(data) {
|
||||
var searchField = $("#city_search")[0];
|
||||
var q = this.url.match(/q=([^&]+)/)[1]
|
||||
var c = searchField.value
|
||||
if (c != q) return;
|
||||
$("#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]
|
||||
}
|
||||
|
||||
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="";
|
||||
return callback(q, data);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
$("#id_tz").selectmenu();
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
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="";
|
||||
return callback(q, data);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
$("#id_tz").selectmenu();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
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="";
|
||||
return callback(q, data);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
$("#id_tz").selectmenu();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue