<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <div class="autocomplete" style="width:400px;"> <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;"> {% if incompatible == "true" %} <h3>Warning: Incompatible Configuration</h3> <p>Please make a different selection, as the current config conflicts with the selected pod</p> {% endif %} </div> <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="{{initial.name}}" oninput="search(this.value)" {% if disabled %} disabled {% endif %} > <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;" {% if disabled %} disabled {% endif %} > </input> <ul id="drop_results"></ul> <div id="default_entry_wrap" style="display: none;"> <div class="list_entry unremovable_list_entry"> <p id="default_text" class="full_name"></p> <button class="btn-remove btn disabled">remove</button> </div> </div> <div id="added_list"> </div> <div id="added_counter" style="text-align: center; margin: 10px;"><p id="added_number" style="display: inline;">0</p><p style="display: inline;">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</p></div> <style> #user_field { font-size: 14pt; width: 400px; padding: 5px; } #drop_results{ list-style-type: none; padding: 0; margin: 0; max-height: 300px; min-height: 0; overflow-y: scroll; overflow-x: hidden; border: solid 1px #ddd; display: none; } #drop_results li a{ font-size: 14pt; border: 1px solid #ddd; background-color: #f6f6f6; padding: 12px; text-decoration: none; display: block; width: 400px; } .btn-remove { float: right; height: 30px; margin: 4px; } .list_entry { width: 400px; border: 1px solid #ddd; border-radius: 3px; margin-top: 5px; vertical-align: middle; line-height: 40px; height: 40px; padding-left: 12px; } #drop_results li a:hover{ background-color: #ffffff; } .small_name { display: inline-block; } .full_name { display: inline-block; } </style> </div> <script type="text/javascript"> //flags var show_from_noentry = {{show_from_noentry|default:"false"}}; var show_x_results = {{show_x_results|default:-1}}; var results_scrollable = {{results_scrollable|default:"false"}}; var selectable_limit = {{selectable_limit|default:-1}}; var field_name = "{{name|default:"users"}}"; var placeholder = "{{placeholder|default:"begin typing"}}"; var default_entry = "{{default_entry}}"; //needed info var items = {{items|safe}} //tries var expanded_name_trie = {} expanded_name_trie.isComplete = false; var small_name_trie = {} small_name_trie.isComplete = false; var string_trie = {} string_trie.isComplete = false; var added_items = []; var initial_log = {{ initial|safe }}; var added_template = {{ added_list|default:"{}" }}; if( default_entry ) { var default_entry_div = document.getElementById("default_entry_wrap"); default_entry_div.style.display = "inherit"; var entry_p = document.getElementById("default_text"); entry_p.innerText = default_entry; } search_field_init(); if( show_from_noentry ) { search(""); } function disable() { var textfield = document.getElementById("user_field"); var drop = document.getElementById("drop_results"); textfield.disabled = "True"; drop.style.display = "none"; var btns = document.getElementsByClassName("btn-remove"); for( var i = 0; i < btns.length; i++ ) { btns[i].classList.add("disabled"); } } function search_field_init() { build_all_tries(items); var initial = {{ initial|safe }}; for( var i = 0; i < initial.length; i++) { select_item(String(initial[i])); } if(initial.length == 1) { search(items[initial[0]]["small_name"]); document.getElementById("user_field").value = items[initial[0]]["small_name"]; } } function build_all_tries(dict) { for( var i in dict ) { add_item(dict[i]); } } function add_item(item) { var id = item['id']; add_to_tree(item['expanded_name'], id, expanded_name_trie); add_to_tree(item['small_name'], id, small_name_trie); add_to_tree(item['string'], id, string_trie); } function add_to_tree(str, id, trie) { inner_trie = trie; while( str ) { if( !inner_trie[str.charAt(0)] ) { new_trie = {}; inner_trie[str.charAt(0)] = new_trie; } else { new_trie = inner_trie[str.charAt(0)]; } if( str.length == 1 ) { new_trie.isComplete = true; new_trie.itemID = id; } inner_trie = new_trie; str = str.substring(1); } } function search(input) { if( input.length == 0 && !show_from_noentry){ dropdown([]); return; } else if( input.length == 0 && show_from_noentry) { dropdown(items); //show all items } else { var trees = [] var tr1 = getSubtree(input, expanded_name_trie); trees.push(tr1); var tr2 = getSubtree(input, small_name_trie); trees.push(tr2); var tr3 = getSubtree(input, string_trie); trees.push(tr3); var results = collate(trees); dropdown(results); } } function getSubtree(input, given_trie) { /* recursive function to return the trie accessed at input */ if( input.length == 0 ){ return given_trie; } else{ var substr = input.substring(0, input.length - 1); var last_char = input.charAt(input.length-1); var subtrie = getSubtree(substr, given_trie); if( !subtrie ) //substr not in the trie { return {}; } var indexed_trie = subtrie[last_char]; return indexed_trie; } } function serialize(trie) { /* takes in a trie and returns a list of its item id's */ var itemIDs = []; if ( !trie ) { return itemIDs; //empty, base case } for( var key in trie ) { if(key.length > 1) { continue; } itemIDs = itemIDs.concat(serialize(trie[key])); } if ( trie.isComplete ) { itemIDs.push( trie.itemID ); } return itemIDs; } function collate(trees) { /* takes a list of tries returns a list of ids of objects that are available */ results = []; for( var i in trees ) { var available_IDs = serialize(trees[i]); for( var j=0; j<available_IDs.length; j++){ var itemID = available_IDs[j]; results[itemID] = items[itemID]; } } return results; } function dropdown(ids) { /* takes in a mapping of ids to objects in items and displays them in the dropdown */ var drop = document.getElementById("drop_results"); while(drop.firstChild) { drop.removeChild(drop.firstChild); } for( var id in ids ) { var result_entry = document.createElement("li"); var result_button = document.createElement("a"); var obj = items[id]; var result_text = document.createTextNode(obj['small_name'] + " : " + obj['expanded_name']); result_button.appendChild(result_text); result_button.setAttribute('onclick', 'select_item("' + obj['id'] + '")'); result_entry.appendChild(result_button); drop.appendChild(result_entry); } if( !drop.firstChild ) { drop.style.display = 'none'; } else { drop.style.display = 'inherit'; } } function select_item(item_id) { //TODO make faster var item = items[item_id]; if( (selectable_limit > -1 && added_items.length < selectable_limit) || selectable_limit < 0 ) { if( added_items.indexOf(item) == -1 ) { added_items.push(item); } } update_selected_list(); document.getElementById("user_field").focus(); } function remove_item(item_ref) { item = Object.values(items)[item_ref]; var index = added_items.indexOf(item); added_items.splice(index, 1); update_selected_list() document.getElementById("user_field").focus(); } function edit_item(item_id){ var wf_type = "{{wf_type}}"; parent.add_edit_wf(wf_type, item_id); } function update_selected_list() { document.getElementById("added_number").innerText = added_items.length; selector = document.getElementById('selector'); selector.value = JSON.stringify(added_items); added_list = document.getElementById('added_list'); while(selector.firstChild) { selector.removeChild(selector.firstChild); } while(added_list.firstChild) { added_list.removeChild(added_list.firstChild); } list_html = ""; for( var key in added_items ) { item = added_items[key]; list_html += '<div class="list_entry"><p class="full_name">' + item["expanded_name"] + '</p><p class="small_name">, ' + item["small_name"] + '</p><button onclick="remove_item(' + Object.values(items).indexOf(item) + ')" class="btn-remove btn">remove</button>'; {% if edit %} list_html += '<button onclick="edit_item(' + item['id'] + ')" class="btn-remove btn">edit</button>'; {% endif %} list_html += '</div>'; } added_list.innerHTML = list_html; } </script> <style> .full_name { display: inline-block; } .small_name { display: inline-block; } </style>