Ottenere tutti i risultati corrispondenti di file XML con jQuery su keyup

StackOverflow https://stackoverflow.com/questions/7309957

  •  26-10-2019
  •  | 
  •  

Domanda

Sono nuovo di XML e AJAX, quindi mi chiedevo come posso ottenere corrispondenti risultati da file XML, mentre sto scrivendo. Ho un codice di esempio che funziona relativamente bene, ma i miei risultati duplicati ogni volta con ogni lettera io entro, quindi qualcuno può aiutarmi a risolvere questo problema? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<form>
<input name="unos" type="text" />
</form>
<div id="stuff" style="width:400px; background:#0F0; padding-left:10px;"></div>
<div id="stuff2" style="width:400px; background:#0F0; padding-left:10px;"></div>
</body>
</html>

XML: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<ljudi>
<osoba>
    <broj>1</broj>
    <ime>Pera</ime>
    <prezime>Petrovic</prezime>
    <adresa>Perin Grad 1</adresa>
</osoba>
    <osoba>
    <broj>2</broj>
    <ime>Sloba</ime>
    <prezime>Slobic</prezime>
    <adresa>Slobodija 2</adresa>
</osoba>
    <osoba>
    <broj>3</broj>
    <ime>Zoran</ime>
    <prezime>Zoric</prezime>
    <adresa>Zorun 32</adresa>
</osoba>
    <osoba>
    <broj>4</broj>
    <ime>Milan</ime>
    <prezime>Milanovic</prezime>
    <adresa>Milanovo 46</adresa>
</osoba>
     <osoba>
    <broj>5</broj>
    <ime>Nenad</ime>
    <prezime>Nenadovic</prezime>
    <adresa>Nenadovice 51</adresa>
</osoba>
<osoba>
    <broj>6</broj>
    <ime>Zora</ime>
    <prezime>Zorkovic</prezime>
    <adresa>Zorun nije tu</adresa>
</osoba>
</ljudi>

JS: 

$(document).ready( function() {
var n_ime=new Array();
num_div=0;
$("#stuff, #stuff2").hide();
$('form input').keyup(function() {
unos=$(this).val();
if (unos!=""){
$.ajax({
type:"GET",
url:"file.xml",
dataType:"xml",
success: function(xml) {
    $(xml).find('osoba').each( function() {
    ime=$(this).find('ime').text();
    trazi=new RegExp(unos,"i"); 
    if((trazi.test(ime))==true)
    {
    prezime=$(this).find('prezime').text(); 
    adresa=$(this).find('adresa').text();
    $("#stuff").append('<div><p>Ime: '+ime+'</p>','<p>Prezime: '+prezime+'</p>','<p>Adresa: '+adresa+'</p></div>');
    $("#stuff").dequeue().fadeIn(500);
    };
    });
}
});
            } /* if (unos!="") kraj uslova */
else{
$("#stuff").dequeue().stop(true,true).fadeOut(500,function(){
$("#stuff p").remove();
});
}




});
});

codice funziona fino ad ora, provare digitando "Zoran" o "Zora" e vedrete qual è il problema, i risultati vengono duplicate per tutto il tempo, quindi c'è un modo per risolvere questo problema in qualche modo, e rimuovere questi risultati in più?

È stato utile?

Soluzione

Se il file XML è statico, comincerei caricandola solo una volta quando la pagina viene caricata in modo che non si chiama, scaricati, e analizzato ogni volta. Ho intenzione di incollare l'intero pezzo di codice JavaScript inserito qui, ma il bit importante è dove ho impostato $("#stuff").html(''); che svuota il contenuto del #stuff. 

$(document).ready(function() {
    var xml = '';
    $.ajax({
      url: "file.xml",
      success: function(data) { xml = $(data) },
      dataType: 'xml'
    });
    var n_ime = new Array();
    num_div = 0;
    $("#stuff, #stuff2").hide();
    $('form input').keyup(function() {
        unos = $(this).val();
        if (unos != "") {
            $('#stuff').html('');
            xml.find('osoba').each(function() {
                ime = $(this).find('ime').text();
                trazi = new RegExp(unos, "i");
                if ((trazi.test(ime)) == true)
                {
                    prezime = $(this).find('prezime').text();
                    adresa = $(this).find('adresa').text();
                    $("#stuff").append('<div><p>Ime: ' + ime + '</p>', '<p>Prezime: ' + prezime + '</p>', '<p>Adresa: ' + adresa + '</p></div>');
                    $("#stuff").dequeue().fadeIn(500);
                };
            });

        }
        /* if (unos!="") kraj uslova */
        else {
            $("#stuff").dequeue().stop(true, true).fadeOut(500,
            function() {
                $("#stuff p").remove();
            });
        }
    });
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top