키쌍에 jQuery가있는 XML 파일과 일치하는 결과를 모두 얻으십시오.

XML과 AJAX가 생소하므로 XML 파일에서 일치하는 결과를 얻으려면 어떻게해야할까요? 비교적 잘 작동하는 샘플 코드가 있지만 입력 할 때마다 매번 내 결과가 중복되므로 누구나이 문제를 해결할 수 있습니까?키쌍에 jQuery가있는 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(); 
}); 
} 




}); 
});

코드가 지금까지 작동, "조란"또는 "조라"를 입력하여 그것을 밖으로 시도하고 당신이 어떤 문제를 볼 수 있습니다 결과가 항상 복제되므로 어떻게 든이 문제를 해결하고 추가 결과를 제거 할 수 있습니까?

출처

2011-09-05 Mentalhead

xml 파일이 정적 인 경우 페이지를 처음로드 할 때 한 번만로드하여 시작할 때마다 호출, 다운로드 및 파싱되지 않도록합니다. 여기에 자바 스크립트의 전체 덩어리를 붙여 넣을 것입니다. 그러나 중요한 비트는 #을 #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-05 15:39:05

감사합니다. – Mentalhead

키쌍에 jQuery가있는 XML 파일과 일치하는 결과를 모두 얻으십시오.

답변

관련 문제