Get all matching results from XML file with jQuery on keyup
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>
</os开发者_StackOverflow中文版oba>
<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?
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();
});
}
});
});
加载中,请稍侯......
精彩评论