検索補完を実現したいです。JavaScriptのxhrで一つ一つの要素に処理を行うものを考えています。

JavaScriptのxhrで取得したものから属性値を抽出したいのですが
方法がよくわかりません。

<form name="f"> 
<input type="text" name="t" onkeyup="s()"> 
</form> 
<script async defer> 
    function s() {
      v = document.f.t.value;
      var x = new  XMLHttpRequest();
      x.addEventListener('load',function(ev) {
        document.getElementById('r').textContent = x.response;
      });
      x.open('GET','/complete?q=' + v);
      x.send();
    } 
</script> 
<p id="r"></p>

というソースコードでテキストフォームに例えば「あ」と入力すると

<?xml version="1.0"?>
<toplevel>
<CompleteSuggestion>
<suggestion data="アマゾン"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="明日の天気"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アニメ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アニポ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アイコス"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="あ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="嵐"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アンパンマン"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アスクル"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="青空エール"/>
</CompleteSuggestion>
</toplevel>

このように表示されるのですがdata属性の値を抽出してforeachのようなことを行いたいです。
お手数をおかけしますが、方法を教えて頂けるとありがたいです。
追加の希望で恐縮ですがjQueryなどライブラリーを使用しない方法を提示してください。