Question

I have a script which allows to retrieve Google suggestions (XML) with Javascript and output in plain HTML:

<input  id='inp' /> <select  id='sug' />

<script type='text/javascript'>

function el(tid) {return document.getElementById(tid);}

function addScript(u){ 
   var head=document.getElementsByTagName('head')[0],
     sc2=document.createElement('script'); sc2.src=u;    
   head.appendChild(sc2);
   setTimeout(function(){ head.removeChild(sc2); sc2=null;}, 20000)
 }//end addScript()


function suggest(data){ 
  var sel=el("sug").options; sel.length=0;
  data[1].map(function(a){return a[0];}).map(function(a,b){
  sel[b]=new Option(a);
 });
 sel.size=data[1].length;
}//end suggeest()


el("inp").onkeyup=function(){
  addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}

As you can see the XML data is now a select option list. My question: How can I get this in a ul—>li HTML rather than the select option list.

Answer 1

AFAIK there is no standard DOM object to represent ul / li so your “OO” way isn’t working… however, following seems to work in my FireFox browser: in the html body have a list like

<ul id='test'>
  <li>test</li>
</ul>

and replace in JavaScript the suggest function with this one

function suggest(data){ 
  var sel=el("test"); sel.innerHTML='';
  data[1].map(function(a){return a[0];}).map(function(a,b){
  sel.innerHTML += '<li>'+a+'</li>';
 });
}

BTW add the list before the select element or write it like

<select  id='sug'></select>
<ul id='test'>
  <li>test</li>
</ul>

(ie select is writen with proper end tag) otherwise the list won’t show in the page

EDIT:
Version which seems to work in IE

function suggest(data){ 
  var sel=el("test"); sel.innerHTML='';
  for(x=0; x<data[1].length;x++){
     sel.innerHTML += '<li>'+data[1][x][0]+'</li>';
  }
}