Adding to UI
+{% load static %}
+
+{% block extra_css %}
+ <link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.tagsinput-revisited.min.css" />
+ <style>
+ .tagsinput {
+ border: 1px solid #ccc;
+ }
+
+ .tagsinput div input::-webkit-input-placeholder {
+ color: #777;
+ }
+ </style>
+{% endblock %}
+
<form id="form-signup" action="/accounts/signup/" method="post" role="form">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group">
{% include "includes/form_field.html" with field=form.password2 inline_label=True %}
</div>
+ <div class="form-group">
+ <input class="form-control form-required tagsinput" {% if profile.organization %}value="{{ profile.organization }}"{% endif %} name="organization">
+ <small class="text-muted">The names of up to two organizations you are associated with.</small>
+ </div>
</div>
<div class="row">
</div>
</form>
+<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tagsinput-revisited.min.js"></script>
<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
}
});
});
+
+ $('.tagsinput').tagsInput({
+ limit: 2,
+ placeholder: "Add Organization(s)",
+ autocomplete: {
+ source: "/hsapi/dictionary/universities/",
+ minLength: 3,
+ delay: 500,
+ classes: {
+ "ui-autocomplete": "minHeight"
+ }
+ }
+ });
+
</script>
