0

我是 XML 和 AJAX 的新手，所以我想知道如何在输入时从 XML 文件中获得匹配的结果。我有一个工作相对较好的示例代码，但每次输入的每个字母都会重复我的结果，所以有人可以帮我解决这个问题吗？

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




});
});

代码工作至今，通过输入“Zoran”或“Zora”试试，你会发现问题出在哪里，结果总是重复，所以有没有办法以某种方式解决这个问题，并删除那些额外的结果?

4

1 回答 1

1

如果 xml 文件是静态的，我会在页面第一次加载时只加载一次，这样就不会每次都调用、下载和解析它。我将在此处粘贴整个 javascript 块，但重要的是我设置的位置$("#stuff").html('');清空了 #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();
            });
        }
    });
});
于 2011-09-05T15:39:05.150 回答