title: How to make list item selectable in Input Tag
body: <p>I create a InputFilter. Here is my code.</p>
  
  <pre><code>MyFilter = function(args) {
      var dataUrl = args.url;
      var divID = args.divID;
      var div = document.getElementById(divID);
      //var input = '&lt;input type="text" id="myInput" onclick="myFunction()" title="Type in a name"&gt;';
      var myTable = '&lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;' +
          '&lt;ul id="myUL"&gt;' + '&lt;li&gt;' + '&lt;a href="#"&gt;&lt;/a&gt;' + '&lt;/li&gt;' + '&lt;/ul&gt;';
      div.innerHTML = myTable;
  
      function foo(callback) {
          var httpRequest = new XMLHttpRequest();
          httpRequest.open('GET', "data.json", true);
          httpRequest.onreadystatechange = function() {
              if (httpRequest.readyState === XMLHttpRequest.DONE &amp;&amp; httpRequest.status === 200) {
                  callback(httpRequest.responseText);
              }
          };
          httpRequest.send();
      }
  
      foo(function(data) {
          debugger;
          var jsonc = JSON.parse(data);
          var new_opt = "";
          for (i = 0; i &lt; jsonc.length; i++) {
              new_opt += '&lt;li&gt;&lt;a href="#"&gt;' + jsonc[i]['VALUE'] + '&lt;/a&gt;&lt;/li&gt;';
          }
          document.getElementById('myUL').innerHTML = new_opt;
  
      });
  
      myFunction = function() {
          debugger;
          var input, filter, ul, li, a, i;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          ul = document.getElementById("myUL");
          li = ul.getElementsByTagName("li");
          for (i = 0; i &lt; li.length; i++) {
              a = li[i].getElementsByTagName("a")[0];
              if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                  li[i].style.display = "";
              } else {
                  li[i].style.display = "none";
  
              }
          }
      }
  }
  </code></pre>
  
  <p>I want when i click on list item, these items geteselected and displayed into inputfield,like combo box. </p>
  
  <p>Can anybody please help me how to do that.</p>
  
  <p>Here is my fiddler. <a href="https://jsfiddle.net/Arsenal/wsfgbqyk/" rel="nofollow noreferrer">JS FIDDLE</a></p>
  
  <p><strong>Note</strong> : Currently with my code I am able to search, I want to select and display in input.</p>
  
  <p>It is happening in other project but there I am using table.</p>
  
  <p>Code for that is </p>
  
  <pre><code>document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
              _tr.addEventListener('click', function() {
                  document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent;
              });
          });
  </code></pre>
  
  <p>I want to click on items of <code>a</code> tag and selected items want to display in input tag by <code>;</code> separation.</p>