My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
UI
2013.03.08 23:29

AutoCompleate - ( XML + Jquery )

kay
조회 수 5540 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

jQuery + XML 연동 Autocomplete 예제

test Url : http://www.uhoon.co.kr/test/409.html 

 

auto.png

 

*auto.html

<head>
<meta charset="utf-8" />
<title>jQuery Autocomplete</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
</head>
<body>

<script>
$(document).ready(function() { 
var lang = "en"; 
$("#lang").bind("change", function() {
lang = this.value;
});

    $.ajax({
        url: "data.xml",
        dataType: "xml",
        success: function( xmlResponse ) {
            var data = $("dong", xmlResponse ).map(function() {
                return {
                    value: "",
                    name_en: $( "name_en", this ).text(),
                    name_kr: $("name_kr", this).text(), 
                    web: $( "web", this ).text()
                };
            }).get(); 
            $("#results").autocomplete({
                source: function(req, add) {
                 var source = [];
                 for (var i = 0; i < data.length; i++)
                 {           
                    if (lang == "en")
                    {
                        data[i].value = data[i].name_en;   
                    }
                    else if (lang == "kr")
                    {
                        data[i].value = data[i].name_kr;  
                    } 
                    if (data[i].value.toLowerCase().indexOf($("#results").val().toLowerCase()) >= 0)
                    {
                         source.push(data[i]);   
                     }
                 } 
                 add(source);
                },
                minLength: 0,
                select: function( event, ui ) {
                        $('#translate').html('');
                        $('#web').html('');
                        if (lang == "en")
                        {
                            dongName = ui.item.name_kr;   
                        }
                        else if (lang == "kr")
                        {
                            dongName = ui.item.name_en;  
                        } 
                        $('#translate').html(dongName).slideDown();
                        $('#web').html(ui.item.web).slideDown();

                }
            });
        },error: function(xhr, ajaxOptions, thrownError){ alert(thrownError);  alert(xhr.responseText); }
    }); 
}); 
</script>
<div class="ui-widget"> 
<p>
<select id="lang">
<option value="en">EN</option>
<option value="kr">KR</option>
</select>
<input type="text" id="results" style="width:500px;"/>
</p>
<p>
<label for="translate">translate : </label>
<span id="translate"></span>
</p>
<p>
<label for="web">web : </label>
<span id="web"></span>
</p>
</div> 
</body>
</html>



*data.xml


<?xml version="1.0" encoding="UTF-8"?>
<list>
<dong>
    <name_en>Mugyo-dong, Jung-gu, Seoul, Korea</name_en>
    <name_kr>서울특별시 중구 무교동</name_kr> 
    <web>http://www.무교동.com</web>
</dong>
<dong>
    <name_en>Gunja-dong, Gwangjin-gu, Seoul, Korea</name_en>
    <name_kr>서울특별시 광진구 군자동</name_kr> 
    <web>http://www.군자동.com</web>
</dong>
<dong>
    <name_en>Guui 1-dong, Gwangjin-gu, Seoul, Korea</name_en>
    <name_kr>서울특별시 광진구 구의1동</name_kr> 
    <web>http://www.구의1동.com</web>
</dong>
<dong>
    <name_en>Guui 2-dong, Gwangjin-gu, Seoul, Korea</name_en>
    <name_kr>서울특별시 광진구 구의2동</name_kr> 
    <web>http://www.구의2동.com</web>
</dong>
</list>





?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 etc $.trim(str) trim... kay 2013.10.16 3957
53 UI .on kay 2013.04.03 4919
52 etc 1.9x 버전 $.browser 삭제 대체 사용 2 kay 2013.04.26 5661
51 UI animate - 각종 애니메이션 효과 kay 2013.04.11 26329
50 UI AutoCompleate - ( JSON + Jquery ) kay 2013.04.02 5905
» UI AutoCompleate - ( XML + Jquery ) kay 2013.03.08 5540
48 A to Z CheckBox 값 읽어오기 kay 2013.05.06 25267
47 A to Z datepicker 달력 file kay 2013.08.05 6309
46 etc FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출. kay 2014.10.23 2999
45 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
44 etc input hidden <-> text 변경하기 kay 2013.05.03 5952
43 A to Z Javascript 강제 이벤트 실행시키기 "trigger" kay 2013.07.30 6041
42 A to Z JQuery A to Z kay 2013.01.02 5114
41 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 2078
40 A to Z jQuery Learning Center - 공부 공부 kay 2013.04.05 4236
39 etc Jquery Load 유무 체크하기 kay 2014.02.12 4287
38 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
37 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105353
36 UI Jquery Slider Bar / 슬라이더 바 3종 샘플 file kay 2014.07.28 6712
35 PlugIn jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 ) kay 2013.04.17 8421
Board Pagination Prev 1 2 3 Next
/ 3