www.webdeveloper.com
Results 1 to 9 of 9

Thread: Show XML with javascript

  1. #1
    Join Date
    Dec 2009
    Posts
    92

    Show XML with javascript

    Hi all,

    I found a nice script which I want to use. It offers Google suggestions in XML format:

    Code:
    <form action="http://www.google.nl/complete/search? " method="get"><div>
    
    <input type="text" size="20" name="q" />
    
    <input type="submit" value="Submit" />
    
    <input type="hidden" name="output" value="toolbar" /></div>
    </form>
    The problem is that I want to display the XML data as plain HTML text on the same page when submitting (so in a div). I have Googled for this but There is nothing on the internet that can solve my problem. However I think it is possible to show the XML data using Javascript. But I think that I would have a hard time trying since the XML is not in the same root.

    Any help is appreciated. If you don't want to write the code please point me in the right way.

    Thanks

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    use the json(p) APIs, not the XML ones.
    xml cannot cross domains, jsonp can...

  3. #3
    Join Date
    Dec 2009
    Posts
    92
    Quote Originally Posted by rnd me View Post
    use the json(p) APIs, not the XML ones.
    xml cannot cross domains, jsonp can...
    I can't find a jsonp API for Google suggestions.. Do you mean I have to write it myself?

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by yomoore View Post
    I can't find a jsonp API for Google suggestions.. Do you mean I have to write it myself?
    i guess so, surprising they don't offer it.
    i think yql has something like that, and i know Wikipedia has a hijack-able suggestion api...

  5. #5
    Join Date
    Dec 2009
    Posts
    92
    Please take a look at www.begin.nl (a dutch starting page) They are using the google suggestions in XML format with this url: ''http://www.google.com/complete/search?hl=nl&q='' , I think with json.

    I would really like to understand how they are doing it so I can alter the code in an original code that I can use. I don't want to copy/paste there code since they did all the hard work.

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    good digging, that makes it easy:

    Code:
    <body>
    <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").onkeypress=function(){
      addScript("http://www.google.com/complete/search?hl=nl&callback=suggest&q="+this.value);
    }
    	
    </script>	
    </body>
    you can cut and paste my work above since i only spent 5 mins on it...

  7. #7
    Join Date
    Dec 2009
    Posts
    92
    Hi rnd me, Thank you very much but it is not perfect..Its giving me a different suggestion list than the original. I think it has something to do with the url but Im not sure. I will try to figure it out.
    (Less important: It would be helpful to explain to me what you have done here, it looks like plain javascript to me but I could be mistaken. Why did you put the list as an option list, and why the timer?)

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by yomoore View Post
    Why did you put the list as an option list, and why the timer?)
    it's just a demo, you should modify the html making part as you see fit; since there's no xml and i don't know how you want the data displayed, i choose a select since it's simple to populate with suggestions.

    the timer removes the script tags from old suggestion dispatches, freeing up memory. otherwise, they can accumulate and if nothing else, they slow down firebug.

  9. #9
    Join Date
    Dec 2009
    Posts
    92
    Hi rnd me, I think I would prefer a simple div/ul/li because I can do more with it than the option list, I will look more in to this and try to figure it out. nevertheless this is more than I could have hoped for Thanks for your time and effort. I have changed the url in to this: "http://www.google.nl/complete/search?callback=suggest&q=" So now there is no "junk(?)" in the suggestions and it is exactly like the original.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles