JSFiddle - React, Tailwind, and code Playground

HTML

<form action="http://" name="f">
<input type="text" name="opt">
    <select name="name_ob"  id="select_projects">

</select>

<p></p>
</form>

JavaScript

// (1)
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;

var xhr = new XHR();

// (2) запрос на другой домен :)
xhr.open('GET', 'http://pecom.ru/ru/calc/towns.php', true);

xhr.onload = function() {
var x = this.responseText;
var r = /\\u([\d\w]{4})/gi;
x = x.replace(r, function (match, grp) {
    return String.fromCharCode(parseInt(grp, 16)); } );
x = JSON.parse(unescape(x));
var myselect="";


for (var key in x) {
 if (Object.prototype.toString.call(x[key])=="[object Object]") {
   console.log(key);
    myselect=myselect+" <optgroup label='"+key+ "'>";
     
     for (var i in x[key]) { 
    console.log(i+':'+x[key][i])
     myselect=myselect+"<option value='"+i+"'>"+x[key][i]+"<\/option>";
          }
  
     myselect=myselect+"<\/optgroup>"
     
 }  
  else{  console.log(key+':'+x[key])
      myselect=myselect+"<option value='"+key+"'>"+x[key]+"<\/option>";
      
      }
   document.getElementById('select_projects').innerHTML=myselect; 
 
 var f = document.forms["f"],
    s = f["name_ob"], o = s.querySelectorAll("option"),
    inp = f["opt"],
    reg;
inp.oninput = function() {
    reg = new RegExp("^" +this.value, "ig");  //если искать только в начале  "^" + this.value, "ig"
    s.options.length = 0;
    for (var i=0; i<o.length; i++)  {
       reg.test(o[i].text) && s.options.add(o[i]);
       reg.lastIndex = 0;
    }
};
   
    
    
}
}

xhr.onerror = function() {
  alert( 'Ошибка ' + this.status );
}

xhr.send();