Keskustelu: Nettisivujen teko: jQuery (selector) ja XML-tiedoston tietokentän tulostus

JoukoP [29.12.2010 09:50:27]

Yritin löytää ratkaisua "ongelmaani" kahlaamalla nettisivuja, mutta ohjelmointitaidon puutteen takia en oikein päässyt alkua pidemmälle.
Valitettavasti joudun tällä kertaa ottamaan kysyjän roolin.

Ongelma:

Minulla on XML-tiedosto mallia:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<fruitlist>
  <fruitinfo>
    <Fruit>Apple</Fruit>
    <Energy>207/49</Energy>
    <Fiber>2.3</Fiber>
    <Sugar>11.8</Sugar>
    <Protein>0.4</Protein>
  </fruitinfo>
  <fruitinfo>
    <Fruit>Banana</Fruit>
    <Energy>375/88 </Energy>
    <Fiber>2.7</Fiber>
    <Sugar>20.4</Sugar>
    <Protein>1.2</Protein>
   </fruitinfo>
  <fruitinfo>
    <Fruit>Lemon</Fruit>
    <Energy>51/12</Energy>
    <Fiber>1.8</Fiber>
    <Sugar>3.0</Sugar>
    <Protein>0</Protein>
  </fruitinfo>
  <fruitinfo>
    <Fruit>Orange</Fruit>
    <Energy>198/47</Energy>
    <Fiber>1.8</Fiber>
    <Sugar>10.6</Sugar>
    <Protein>1.0</Protein>
  </fruitinfo>

Miten saisin tuosta jQueryn selector+autocomplete ominaisuuden avulla tai muun toiminnallisuuden avulla haettua yhden hedelmän tiedot ja tulostettua tiedot.

Esimerkiksi: Kirjoittamalla "oran" niin käyttöliittymä täydentää sanan "Orange".
Ohjelma voi automaattisesti tulostaa tiedot kun yksi päätieto on valittu. (Ei tarvitse erikseen painaa lähetä/submit näppiä)

Hedelmä: _____
Energia: _____
Kuitu: _____
Sokeri: _____
Proteiini: _____

Tarkoitus olisi, että sivustoa voisi käyttää kännykän nettiselaimen avulla.
Löysin myös jonkun jQueryä vastaavan, joka olisi varsinaisesti mobiiliympäristöön suunnattu.
http://dojotoolkit.org/
@@@@@@@
Tämä vaikuttaa perushommalta, josta voisi kirjoittaa koodivinkin.
Aihealueet:
- jQueryn käyttö XML-tiedostojen kanssa
- jQueryn avulla valitun tiedon tulostaminen
- Autocomplete

Kiitos vastauksista.

neau33 [29.12.2010 23:44:22]

Moi JoukoP!

Tässä jutska, joka toimii IE:ssä ilman jQuery-kamaa...

testi.html:

<html><head></head>
<script language="JavaScript" src="jscript.js">
</script><body>
<input id="text1" type="text"/>
<input id="button1" type="button" value="search"
onclick="ReadXML('fruits.xml',text1.value);"/>
</body></html>

jscript.js:

var xmlDocument;
var search;

function ReadXML(url, str)
{

  if (str == "")
  {
     alert("ei hakusanaa");
     document.getElementById('text1').focus();
     return;
  }
  var xml = document.createElement("xml");
  xml.src = url; search = str;
  document.body.appendChild(xml);
  xmlDocument = xml.XMLDocument;
  WriteXML(); search = null;
  xmlDocument = null;
  document.body.removeChild(xml);

}

function WriteXML()
{

  try
  {
    var fruitsArray = xmlDocument.getElementsByTagName('fruitinfo');
    if (fruitsArray.length > 0)
    {
      var content = "";
      for(i=0;i<fruitsArray.length;i++)
      {
        if (fruitsArray[i].firstChild.text.indexOf(search) > -1)
        {
          document.getElementById('text1').value = fruitsArray[i].firstChild.text;
          for(j=0;j<fruitsArray[i].childNodes.length; j++)
          {
            content += fruitsArray[i].childNodes[j].nodeName + ": ";
            content += fruitsArray[i].childNodes[j].text + "\r\n";
          }
          content += "\r\n\r\n";
        }
      }
      if (content == "")
      {
        content = "not found!"
      }
      alert(content);
    }
    document.getElementById('text1').value = "";
  }
  catch(err)
  {
     setTimeout('WriteXML()', 200)
  }

}

fruits.xml:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<fruitlist>
  <fruitinfo>
    <Fruit>Apple</Fruit>
    <Energy>207/49</Energy>
    <Fiber>2.3</Fiber>
    <Sugar>11.8</Sugar>
    <Protein>0.4</Protein>
  </fruitinfo>
  <fruitinfo>
    <Fruit>Banana</Fruit>
    <Energy>375/88 </Energy>
    <Fiber>2.7</Fiber>
    <Sugar>20.4</Sugar>
    <Protein>1.2</Protein>
   </fruitinfo>
  <fruitinfo>
    <Fruit>Lemon</Fruit>
    <Energy>51/12</Energy>
    <Fiber>1.8</Fiber>
    <Sugar>3.0</Sugar>
    <Protein>0</Protein>
  </fruitinfo>
  <fruitinfo>
    <Fruit>Orange</Fruit>
    <Energy>198/47</Energy>
    <Fiber>1.8</Fiber>
    <Sugar>10.6</Sugar>
    <Protein>1.0</Protein>
  </fruitinfo>
</fruitlist>

testi (eka kerralla nappia voi joutua painamaan kahdesti)
testi2

neau33 [30.12.2010 12:42:39]

Moi taas JoukoP!

jutska toimii ehkä paremmin seuraavin muutoksin...

testi.html:

<html><head></head>
<script language="JavaScript" src="jscript.js">
</script><body onload="GetXML('fruits.xml');">
<input id="text1" type="text" onkeyup="ReadXML(text1.value);"/>
</body></html>

script.js:

var fruitsArray;

function GetXML(url)
{

  var xml = document.createElement("xml");
  xml.src = url
  document.body.appendChild(xml);
  xmlDocument = xml.XMLDocument;
  fruitsArray = xmlDocument.getElementsByTagName('fruitinfo');
  document.body.removeChild(xml);
  xmlDocument = null;

}

function ReadXML(search)
{
  if (search.length < 3){return;}

  if (fruitsArray.length > 0)
  {
    var content = "";
    for(i=0;i<fruitsArray.length;i++)
    {
      if (fruitsArray[i].firstChild.text.indexOf(search) > -1)
      {
        document.getElementById('text1').value = fruitsArray[i].firstChild.text;
        for(j=0;j<fruitsArray[i].childNodes.length; j++)
        {
          content += fruitsArray[i].childNodes[j].nodeName + ": ";
          content += fruitsArray[i].childNodes[j].text + "\r\n";
        }
        content += "\r\n\r\n";
      }
    }
    if (content != "")
    {
      alert(content);
    }
  }
}

testi3

tsuriga [30.12.2010 16:35:49]

http://jqueryui.com/demos/autocomplete/#xml

JoukoP [04.01.2011 10:54:11]

Kiitos oikein paljon.
Viikonloppuna täytyy kokeilla miten onnistuu.

tsuriga [10.01.2011 08:41:54]

Tuo jQuery UI:n demo ei välttämättä aloittelevalle kaikessa tiiviydessään aukene, joten sepostelin asiasta auki puretun ja kommentoidun koodivinkin XML-haun täydentäminen jQueryllä, johon tungin hieman löpinää myös HTML5:stä ja webbisivujen optimoinnista.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu