Get all matching results from XML file with jQuery on keyup

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

  •  26-10-2019
  •  | 
  •  

Question

I'm new to XML and AJAX, so I was wondering how can I get matching results from XML file, as I type. I have a sample code that works relatively well, but it duplicates my results every time with each letter I enter, so can anyone help me fix this?

<!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();
});
}




});
});

Code works so far, try it out by typing "Zoran" or "Zora" and you'll see what the problem is, the results get duplicated all the time, so is there a way to fix this somehow, and remove those extra results?

Was it helpful?

Solution

If the xml file is static, I would begin by loading it only once when the page first loads so that it isn't called, downloaded, and parsed each time. I'm going to paste the whole chunk of javascript here, but the important bit is where I set $("#stuff").html(''); which empties the contents of #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();
            });
        }
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top