Feature Proposals » Add a datalist to the form field types

Motivation

Currently, selecting multiple items from a select box that contains a large number of entries is cumbersome. When multiple people are changing the select box values it seems common that they may forget to hold CTRL when making their first selection and remove the previous selections.

Also, when making new selections (using EDITFORMFIELD) it's not clear what has already been selected.

Proposal would be to use the datalist tag (or alternative) but display multiple entries removing the need for the CTRL select method.

Description and Documentation

Use a datalist that auto filters as user types and include a button to allow them to add a value and remove it without needing to use CTRL.

Examples

The idea is shown in the image below:

1) User types into field (datalist will autofilter as typed)

2) User clicks 'Add'

3) Value is added onto page and includes a 'X' icon that allows user to remove it.

4) When satisfied with all entries use clicks Submit to update the form.

The example below is created using the content below (and including a form attached to the topic with a text field named SelectedPeople). Hopefully it's help but unfortunately, implementing this functionality into TWiki is beyond my current skillset.

<style>
.removebutton {
  width:15px;
  height: 15px;
  display:inline-block;
  float:none;
  padding-bottom:1px;
  padding-left:2px;
  line-height:1em;
  margin-top:-0.5em;
  color:#ffffff;
  font-family:Verdana;
  font-size:0.8em;
  font-weight:bold;
  text-decoration:none;
  border:1px solid #000000;
  overflow:hidden; 
  background: #b32727; 
  box-shadow: 0 0 2px gray;
  border-radius: 50%;
  vertical-align: middle;
}
.removebutton:hover {
  background:#30588e;
}
</style>
<script>
$(document).ready(function() {
  
//Script for selecting TWiki Users:
// Variables:
// previousPeople = the people already in the list when the page is loaded
// peopleField = a hidden field where the list of people is stored that is passed on form submit.
// peopleList = an array of all people in the list
// add_Button_ID = the ID of the button that is clicked to add a new entry to the datalist
// datalistID = the ID of the datalist.
// addedPeople = the ID of the region where all people added are listed.

//Check to see if there are any existing values
  var previousPeople = $("#peopleField").val();
  if (previousPeople !== ''){
     //Create an array by splitting the list by comma
    var peopleList = $('#peopleField').val().split(",");
      createHTML();
  } else {
  var peopleList = [];
  }
  
  $("#add_Button_ID").click(function() {
    var selected = $("#datalistID").val();
    if (selected !== '') {
      peopleList.push(selected);
    }
   createHTML();
});
  $('#addedPeople').on('click', '.removebutton', function() {
    $(this).closest('li').remove();
    var val = [];
    peopleList = [];
    $('#ulParent li').each(function() {
      val.push($.trim(this.textContent));
      peopleList.push(this.textContent);
    });
    $("#peopleField").val(val.join(', '));
  });

//This function creates the HTML for the list and buttons.
function createHTML() {
   var EntriesAndButtons = '<ul id="ulParent">';
    var Entries = '';
    for (var i = 0; i < peopleList.length; i++) {

      EntriesAndButtons += "<li>" + $.trim(peopleList[i]) + '  <input type="button" class="removebutton" value="&#10006;" /></li>';
      
      //Trim
      Entries += $.trim(peopleList[i]) + ", ";
    }
    EntriesAndButtons += '</ul>';
    CleanedEntries = Entries.slice(0, -2);
    $('#addedPeople').html(EntriesAndButtons);
    $("#peopleField").val(CleanedEntries);
    $("#datalistID").val('');
}

});</script>


%EDITFORMFIELD{ "form" type="start" action="save" method="post" }%
<input list="PeopleDataList" id="datalistID"> <datalist id="PeopleDataList"><option value="Bruce Wayne"><option value="Clark Kent"></datalist> <input id="add_Button_ID" type="button" value="Add"> - You've selected (click the X to remove): <p id="addedPeople"></p>
%EDITFORMFIELD{ "form" type="submit" value="Update People" style="height:30px; width:200px" }%
<input type="hidden" id="peopleField" name="SelectedPeople" value='%FORMFIELD{"SelectedPeople" topic="%BASETOPIC%"}%' >
%EDITFORMFIELD{ "topic" type="hidden" value="%BASETOPIC%" }%
%EDITFORMFIELD{ "form" type="end" }%

Impact

Implementation

-- Contributors: Jani Hamalainen - 2016-11-25

Discussion