sovsem-nub,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Быстрый поиск по селекту</title>
<script>
window.onload = function() {
var XHR = "onload" in new XMLHttpRequest ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR;
xhr.open("GET", "http://pecom.ru/ru/calc/towns.php", true);
xhr.onload = function() {
var x = this.responseText;
x = JSON.parse(x);
var sel = document.querySelector("#select_projects"),
inp = document.querySelector('[name="opt"]');
function createSelect(val) {
var fragment = document.createDocumentFragment();
var reg = new RegExp("^" +val, "ig");
Object.keys(x).forEach(function(key) {
var optgroup = document.createElement("optgroup");
optgroup.setAttribute("label", key);
var op = x[key];
Object.keys(op).forEach(function(key) {
var text = op[key];
if (!val || reg.test(text)) {
var option = new Option(text, key);
optgroup.appendChild(option)
}
reg.lastIndex = 0;
});
optgroup.children.length && fragment.appendChild(optgroup)
});
sel.innerHTML = "";
sel.appendChild(fragment)
}
createSelect();
inp.addEventListener("input", function() {
createSelect(this.value)
})
};
xhr.onerror = function() {
alert("Ошибка " + this.status)
};
xhr.send()
};
</script>
</head>
<body>
<form action="http://" name="f">
<input type="text" name="opt">
<select name="name_ob" id="select_projects">
</select>
</form>
</body>
</html>