如何在输入标记

Question

我创建了一个输入标记，我想知道

1. 如何获取多个值输入标记，由“;”
分隔
2. 按下输入后，新值将设置为“Hello;”。

如何将新值与其他值分开。

这是我创造的小提琴。我可以通过按键输入或通过下拉菜单从键盘获取值。

openingList = function() {
        var input, filter, ul, li, a, i;
        ul = document.getElementById("myUL");
        ul.hidden = false;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        var splitedVal = filter.split(";");
        filter = (splitedVal[splitedVal.length - 1]);
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = " ";
            } else {
                li[i].style.display = "none";

            }
        }
    }

    deleteValue = function() {
        var inputVal = document.getElementById('myInput');
        inputVal.value = "";
    }

    function filterList(value, list) {
        var li, i, match;

        for (i = list.children.length; i--;) {
            li = list.children[i];
            match = li.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1;
            li.classList.toggle('hidden', !match)
        }
    }

    function selectItem(input, value) {
        input.value += " " + value + ";" + " ";

    }
    var isOutSide = true;

    var input = document.querySelector('input'),
        list = document.querySelector("#myUL");
    arrow = document.querySelector("#arrow");

    /*
        Input function for input tag
    */
    input.addEventListener('input', function(e) {
        filterList(e.target.value, list);
        isOutSide = false;
    })
    /*
        click event for input tag
    */

    input.addEventListener('click', function(e) {
        isOutSide = false;
    })

    /*
        click event for Dropdown icon
    */
    arrow.addEventListener('click', function(e) {
        isOutSide = false;
    })

    /*
        click event for List
    */
    list.addEventListener('click', function(e) {
        isOutSide = false;
        if (e.target.tagName == 'A' && !e.target.classList.contains('header'))
            selectItem(input, e.target.textContent)
    })

    /*
        click event for body
        Hiding the dropdown onclick outside the body
    */
    document.body.addEventListener('click', function(e) {
        var list = document.querySelector("#myUL");
        if (isOutSide) {
            list.hidden = true;
        }
        isOutSide = true;
    })

* {
  box-sizing: border-box;
}

#myInput {
  position: relative;
  border: 1px solid #95B8E7;
  background-color: #fff;
  height: 30px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
   width : 30%;
  overflow-y: scroll; 
  height : 100px;
}

#myUL li a {
  background-color: #f6f6f6;
  padding: 5px;
  width : 100%;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block
}

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
#container {
  position: relative;
  width: 30%;
}

#textfield {
  height:30px;
  width: 100%;
}

.trigger{
  width: 20px;
}

#triggers {
  position: absolute;
  left : 350px;
  top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart_line" style="position: relative;">
	<input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:30%;">
		<div id="triggers">
			<img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
				<img class="trigger" src="css/combo_arrow.png" onclick="openingList()" id="arrow">
				</div>
				<ul id="myUL" hidden="">
					<li>
						<a href="#">United State</a>
					</li>
					<li>
						<a href="#">United Kingdom</a>
					</li>
					<li>
						<a href="#">Afghanistan</a>
					</li>
					<li>
						<a href="#">Aland Islands</a>
					</li>
					<li>
						<a href="#">Albania</a>
					</li>
					<li>
						<a href="#">United State</a>
					</li>
					<li>
						<a href="#">United Kingdom</a>
					</li>
					<li>
						<a href="#">Afghanistan</a>
					</li>
					<li>
						<a href="#">Aland Islands</a>
					</li>
					<li>
						<a href="#">Albania</a>
					</li>
					<li>
						<a href="#">undefined</a>
					</li>
				</ul>
			</div>

 var myTable = '<input type="text" id="myInput"  list="myUL" onclick = "openingList()" onkeyup="openingList()" style="width:30%;" >' +
        '<div id="triggers">' + '<img class="trigger" onclick ="deleteValue()" src="css/clearT.png" id="cross" />' + '<img class="trigger" src="css/combo_arrow.png" onclick = "openingList()" id="arrow" />' + '</div>' +
        '<ul id="myUL" hidden=true>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';

    div.innerHTML = myTable;

感谢您的帮助。