search box

let s=document.createElement("input");s.type="search";document.body.insertAdjacentElement("beforeEnd",s); s.name="search"; s.autocomplete="on"; s.style.marginLeft="60px";
let data1=document.body.appendChild(document.createElement("pre"));s.insertAdjacentElement("afterEnd",data1);data1.style.marginLeft="60px";
s.onsearch=function(ev){
    data1.innerHTML="";
    fetch("https://api.bgpview.io/search?query_term="+ev.srcElement.value.trim()).then(r=>r.ok?r.json():{}).then(d=>{
        if (d.data) d=d.data;
        delete d.ipv6_prefixes;
        delete d.internet_exchanges;
        d.asns = d.asns.map(v => ({ asn: v.asn, name: v.name,description: v.description, country_code: v.country_code }));
        d.ipv4_prefixes = d.ipv4_prefixes.map(v => ({ prefix: v.prefix, name: v.name,description: v.description, country_code: v.country_code }));
        console.log(d);
        let s1=d.asns.map(v=>{return `<a href="https://rg443hh.x10.mx/hh/${v.asn}" target=_blank style="background: url('https://flagcdn.com/16x12/${v.country_code.toLowerCase()}.png') no-repeat left center;background-size: 16px 12px;padding-left: 24px;">AS${v.asn}</a>${' '.repeat( Math.min(16-(''+v.asn).length),0)} ${v.description} ${v.name!=v.description?', '+v.name:''}, ${v.country_code} `})
        let s2=d.ipv4_prefixes.map(v=>{return `<a href="https://rg443hh.x10.mx/hh/${v.prefix}" target=_blank style="background: url('https://flagcdn.com/16x12/${v.country_code.toLowerCase()}.png') no-repeat left center;background-size: 16px 12px;padding-left: 24px;">${v.prefix}</a>${' '.repeat( Math.min(18-(''+v.prefix).length),0)} ${v.description} ${v.name!=v.description?'| '+v.name:''}, ${v.country_code} `})

        data1.innerHTML=[...s1,...s2].join("<br/>");
    })
}