<div class="form-group">
<label for="auth_list" class="col-xs-2 control-label">Authority</label>
<div class="col-xs-4">
- <select id="auth_list" name="authority_hrn" size="1" class="form-control" required>
- {% if authorities %}
- {% for authority in authorities %}
- <option value="{{ authority.authority_hrn }}"/>{{authority.authority_hrn}}</option>
- <!-- <option value="{{ authority.authority_hrn }}">{{authority.name}} ({{authority.authority_hrn}})</option> -->
- {% endfor %}
- {% else %} <!-- should not happen -->
- <option value="test">No authority found !!! </option>
- {% endif %}
- </select>
- </div>
+ <div class="ui-widget">
+ <input id="auth_list">
+ </div>
+ </div>
<div class="col-xs-6"><p class="form-hint">An authority responsible for vetting your account</p></div>
</div>
</fieldset>
</form>
</div>
-
+<script>
+jQuery(document).ready(function(){
+ var availableTags = [
+ {% if authorities %}
+ {% for authority in authorities %}
+ {value:"{{ authority.authority_hrn }}",label:"{{authority.name}}"},
+ {% endfor %}
+ {% else %}
+ {value:"",label:"No authority found !!!"}
+ {% endif %}
+ ];
+ $( "#auth_list" ).autocomplete({
+ source: availableTags,
+ select: function( event, ui ) {console.log(jQuery(this))}
+ });
+});
+</script>
{% endblock %}