29505


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

[code]

    <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>
    
[/code]

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

[code]

    <?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>
    
[/code]

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


CC BY-SA 3.0
2016-10-12T12:26:18.620
29504
2016-10-13T12:31:03.610
2016-10-13T02:44:34.077
5519
19132
question
javascript html jquery http xml
検索補完を実現したいです。JavaScriptのxhrで一つ一つの要素に処理を行うものを考えています。


XML文書から属性を取り出すにはDOMParser(もともとJavaScriptに入っています)を使います  
参考:
[クライアントサイドJavaScriptでXML文書のDOMをパースする](http://qiita.com/tom_konda/items/5e9824b38842615c9df1)

また、検索補完をするためには`datalist`要素を使います  
参考: [<input
autocomplete>－HTML5タグリファレンス](http://www.htmq.com/html5/input_autocomplete.shtml)

下記のコードようにすると補完できます

[code]

    
    <form name="f"> 
    <input type="text" name="t" onkeyup="s()" list="keyword"> 
    <datalist id="keyword">
    </datalist>
    </form> 
    <script async defer>
        var datalist = document.getElementById("keyword"); //datalistのDOMを取得
        function s() {
          v = document.f.t.value;
          var x = new  XMLHttpRequest();
          x.addEventListener('load',function(ev) {
            var parser = new DOMParser(); // DOMParserというものを使って変換します (標準ライブラリ)
            var dom = parser.parseFromString(x.response, "text/xml"); // x.responseの値をxmlとしてパース
            var suggestions = dom.getElementsByTagName("suggestion"); // data属性を持っているsuggestion要素だけを集める //data属性の値を入れる空の配列
            for (var i = 0; i < suggestions.length; i++) {
                var option = document.createElement("option"); // オプション要素を生成
                option.value = suggestions[i].getAttribute("data"); // seggesition要素のdata属性の値をoption要素のvalue属性に入れる
                datalist.appendChild(option); // option要素をdatalist要素に追加
    
            }
    
          });
          x.open('GET','/complete?q=' + v);
          x.send();
        } 
    </script> 
    
    
[/code]


CC BY-SA 3.0
2016-10-12T13:43:46.497
29505
2016-10-13T12:31:03.610
2016-10-13T12:31:03.610
5246
5246
29504
answer