IDREF dropdown to select ID

[j-lixi]

Hi Michiel, the new functionality to select from available IDs for IDREF type attributes will be extremely useful for us. The current implementation resets all selections when a new ID is added to the form. Here is the solution I had implemented before your update (which may, or may not be useful to you). It appends a 'select' next to the input field temporarily when the user clicks on the field, which in turn populates the input field with the user selection. The layout is not pretty, but the concept works. Thanks.

document.addEventListener('DOMContentLoaded', function() {

        addOnClicksToCrossRefs();

    }, false);

function addOnClicksToCrossRefs()
{
    // get all the cross ref attributes 
    var xpathExpression = '//input[@data-xsd2html2xml-primitive="idref"]';
    var xpathResult = document.evaluate( xpathExpression, document, null, XPathResult.ANY_TYPE, null );

    crossrefs = [];

    while(node = xpathResult.iterateNext()) {
                console.log('cross ref : ' + node);
                crossrefs.push(node);
    }

    // add "onclick" to the cross reference fields
    crossrefs.forEach(addOnClicks);

    function addOnClicks(value){
        value.setAttribute('onclick','getIDs(this);')   
    }

}   

function getIDs(crossref){

    // remove old dropdown
    if (crossref.nextElementSibling.tagName == "SELECT") {
            crossref.nextElementSibling.remove();
    }

    // get all the UniqueIDs
    var xpathExpression = '//input[@data-xsd2html2xml-primitive="id"]';
    var xpathResult = document.evaluate( xpathExpression, document, null, XPathResult.ANY_TYPE, null );
    var options = [];

    while(node = xpathResult.iterateNext()) {
            if (node.value!="")
            {
                    elementName   = node.parentElement.parentElement.getAttribute("data-xsd2html2xml-name");
                    attributeName = node.parentElement.getAttribute("data-xsd2html2xml-name");
                    idvalue       = node.value;
                    options.push([elementName, attributeName, idvalue]);
            }
    }

    // append drop down menu
    var dropdown =  document.createElement("select");

    dropdown.onchange = function(){
            crossref.value = dropdown.options[dropdown.selectedIndex].value;
            if (crossref.nextElementSibling.tagName == "SELECT") {
                    crossref.nextElementSibling.remove();
            }
    }
    crossref.parentNode.insertBefore(dropdown, crossref.nextSibling);
    options.forEach(addToSelect)

    dropdown.innerHTML +=  '<option disabled selected value> -- select an option -- </option>';

    function addToSelect(value){
            dropdown.innerHTML +=   '<option value="' + value[2] + '">' +  value[0] + " " + value[1] + " " + value[2] +   '</option>';
    }

}