JavaScript XML Search - 検索時に間違ったメッセージを表示する

Question

次の問題について助けを求めるようになりました。私は情報を持つXML文書を持っており、私はXMLのProductName（牛乳）を検索するとすべての情報を取得する検索ボックスを提供するスクリプトを持っています。何が起こるかは、私がProductName（anibal）を検索すると、私にミルクデータを提供することになります。 目的のProductName（ex.santos）を検索してそれに関連するデータを表示するときは、いつも私が意図していました。

私はスクリプトを使ってXMLを残します。

<?xml version="1.0"?> 
 
<item> 
 
    <entry> 
 
    <Date>1/01/2001</Date> 
 
    <ProductName>milk</ProductName> 
 
    <Quantity>10</Quantity> 
 
    <GrossPrice>50</GrossPrice> 
 
    <Profit>10</Profit> 
 
    </entry> 
 
    <entry> 
 
    <Date>2/10/2007</Date> 
 
    <ProductName>anibal</ProductName> 
 
    <Quantity>20</Quantity> 
 
    <GrossPrice>100</GrossPrice> 
 
    <Profit>20</Profit> 
 
    </entry> 
 
    <entry> 
 
    <Date>2/10/2007</Date> 
 
    <ProductName>santos</ProductName> 
 
    <Quantity>20</Quantity> 
 
    <GrossPrice>600</GrossPrice> 
 
    <Profit>20</Profit> 
 
    </entry> 
 
</item>

Product Name: <input type="text" name="ProductName" id="input"> 
 
<br /> 
 
<input type="submit" value="Submit" onClick="searchXML()"> 
 
<br /> 
 
<br /> 
 
<div id="results"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script language="JavaScript" type="text/javascript"> 
 
    function loadXMLDoc(dname) 
 
    { 
 
     if (window.XMLHttpRequest) 
 
     { 
 
      xhttp=new XMLHttpRequest(); 
 
     } 
 
     else 
 
     { 
 
      xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
     } 
 
     xhttp.open("GET",dname,false); 
 
     xhttp.send(); 
 
     return xhttp.responseXML; 
 
    } 
 
    function searchXML() 
 
    { 
 
     var xmlDoc = loadXMLDoc("filexml.xml"); 
 
     var x = xmlDoc.getElementsByTagName("ProductName"); 
 
     var input = document.getElementById("input").value; 
 
     var size = input.length; 
 
     if(input == null || input == "") 
 
     { 
 
      document.getElementById("results").innerHTML= "Please enter a Product Name!"; 
 
      return false; 
 
     } else 
 
     { 
 
      for (i = 0; i < x.length; i++) 
 
      { 
 

 
       if (x.length > 0) 
 
       { 
 
        var date = xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue; 
 
        var product = xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
 
        var quantity = xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue; 
 
        var grossprice = xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue; 
 
        var profit = xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue; 
 
        var divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>"; 
 
        break; 
 
       } 
 
       else 
 
       { 
 
        var divText = "<h2>The product does not exist.</h2>"; 
 
       }    
 
      } 
 

 
      document.getElementById("results").innerHTML = divText; 
 
     }   
 
    } 
 
</script>

あなたの助けのおかげそんなに！

Answer 1

をお試しください：

Product Name: <input type="text" name="ProductName" id="input"> 
<br /> 
<input type="submit" value="Submit" onClick="searchXML()"> 
<br /> 
<br /> 
<div id="results"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
<script language="JavaScript" type="text/javascript"> 
function loadXMLDoc(dname) 
{ 
    if (window.XMLHttpRequest) 
    { 
     xhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
     xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhttp.open("GET",dname,false); 
    xhttp.send(); 
    return xhttp.responseXML; 
} 
function searchXML() 
{ 
    var xmlDoc = loadXMLDoc("filexml.xml"); 
    var x = xmlDoc.getElementsByTagName("entry"); 
    console.log(x); 
    var input = document.getElementById("input").value; 
    var size = input.length; 
    if(input == null || input == "") 
    { 
     document.getElementById("results").innerHTML= "Please enter a Product Name!"; 
     return false; 
    } else 
    { 

     for (var i = 0; i < x.length; i++) 
     { 
       if (x[i].children[1].textContent == input){ 
       var root = x[i]; 
       var date = root.getElementsByTagName("Date")[0].textContent; 
       var product = root.getElementsByTagName("ProductName")[0].textContent; 
       var quantity = root.getElementsByTagName("Quantity")[0].textContent; 
       var grossprice = root.getElementsByTagName("GrossPrice")[0].textContent; 
       var profit = root.getElementsByTagName("Profit")[0].textContent; 
       var divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>"; 
       break; 

      } 
      else 
      { 
       var divText = "<h2>The product does not exist.</h2>"; 
      } 
     } 

     document.getElementById("results").innerHTML = divText; 
    } 
} 
</script> 

だけ注意することは、同期バージョンは廃止されたために、あなたは非同期コールバックを使用する必要があります。..

Answer 2

実際のXMLノード値と入力値を比較する場所は表示されません。 私はちょうど少しあなたのコードを修正

for (i = 0; i < x.length; i++) { 
    var product = xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
    if(product !== input) continue; 
    //have the rest of your code here 
}