1

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などライブラリーを使用しない方法を提示してください。

2
  • こちらがソースコードの部分に訂正です。
    – edi
    Commented 2016年10月12日 12:27
  • 正しくは <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>
    – edi
    Commented 2016年10月12日 12:28

1 件の回答 1

1

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

また、検索補完をするためにはdatalist要素を使います
参考: <input autocomplete>-HTML5タグリファレンス

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


<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> 

8
  • ご丁寧な説明ありがとうございます。
    – edi
    Commented 2016年10月13日 8:58
  • ご丁寧にありがとうございます
    – edi
    Commented 2016年10月13日 8:59
  • しつもんしたものです。forを使わないと難しいのですね。しかし、autocompleteに対応しているブラウザで実行しましたが表示されませんでした。対策がわからないのでそちらも教えてください。ご迷惑をおかけしました。
    – edi
    Commented 2016年10月13日 9:01
  • 上のようにコメントしましたがnew DomParserをnew DOMParserに変更することで検索補完ができるようになりました。
    – edi
    Commented 2016年10月13日 9:28
  • 大変な感動を覚えました。ありがとうございます。
    – edi
    Commented 2016年10月13日 9:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。