My Name is Kay....

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

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

AutoCompleate - ( JSON + Jquery )

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

jQuery + json 연동 Autocomplete 예제

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

 

기타 옵션 API : http://api.jqueryui.com  , http://docs.jquery.com

 

-  검색 중

jason autocomplete.png

 

- 선택 후

jason autocomplete selected.png

 

<html lang="en"> 
    <head>
        <meta charset="utf-8" />
        <title>jason Jquery Autocomplete</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="./773/773.css" />
        <style>
            .ui-autocomplete-loading {
                background: white url('./773/ui-anim_basic_16x16.gif') right center no-repeat;
            }
            #city {
                width: 25em;
            }
        </style>
        <script>
            $(function() { 
            
                function log( message ) {
                    $( "#log" ).html(message); 
                    $( "#log" ).scrollTop( 0 );
                } 
                $( "#city" ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "773.js",
                            dataType: "json", 
                            success: function( data ) { 
                            response( $.map( data.nationList, function( item ) {
                                if (item.cityName.toLowerCase().indexOf($("#city").val().toLowerCase()) >= 0)
                                {
                                    return {  
                                        label: item.cityName.toLowerCase().replace($( "#city" ).val().toLowerCase(),"<span style='font-weight:bold;color:Blue;'>" + $( "#city" ).val().toLowerCase() + "</span>"),
                                        value: item.cityName,
                                        cityCd:item.cityCd
                                    }
                                }
                            }));
                            }
                        });
                    }, 
                    minLength: 2,
                    select: function( event, ui ) {
                        log( ui.item ? "City Name: " + ui.item.value + " , City Code : " + ui.item.cityCd :
                        "Nothing selected, input was " + this.value);
                    },
                    open: function() {
                        $( this ).autocomplete("widget").width(500);
                        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                    },
                    close: function() {
                        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                    },
                    error: function(xhr, ajaxOptions, thrownError){ alert(thrownError);  alert(xhr.responseText); }
                })
                .data('uiAutocomplete')._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.label + " [ Code : " + item.cityCd + "]</a>" )
                    .appendTo( ul );
                }; 
            });
        </script>
    </head> 
    <body>
        <div class="ui-widget">
            <label for="city">city:</label>
            <input id="city" style="width:500px;" />
        </div>
        <div class="ui-widget" style="margin-top: 2em; font-family: Arial;padding-top:100px;">Result:
            <div id="log" style="height: 200px; width: 400px; overflow: auto;" class="ui-widget-content"></div>
        </div>
    </body> 
</html>

 

 

{"count":60,"nationList":[
{"cityName":"Seoul","cityCd":"SEL"},
{"cityName":"Busan","cityCd":"PUS"},
{"cityName":"Incheon","cityCd":"ICN"},
{"cityName":"Ansan","cityCd":"ASN"},
{"cityName":"Anyang","cityCd":"ANY"},
{"cityName":"Asan","cityCd":"ASA"},
{"cityName":"Boeun","cityCd":"BOEU"},
{"cityName":"Boryeong","cityCd":"BOR"},
{"cityName":"Bucheon","cityCd":"BCN"},
{"cityName":"Changwon","cityCd":"CHW"},
{"cityName":"Cheongju","cityCd":"CJJ"},
{"cityName":"Chonju","cityCd":"CHN"},
{"cityName":"Chuncheon","cityCd":"CHC"},
{"cityName":"Chungju","cityCd":"CHU"},
{"cityName":"Daegu","cityCd":"TAE"},
{"cityName":"Daejeon","cityCd":"TJN"},
{"cityName":"Danyang-gun","cityCd":"DYG"},
{"cityName":"Donghae","cityCd":"TGH"},
{"cityName":"Gangneung","cityCd":"KAG"},
{"cityName":"Geoje","cityCd":"JGE"},
{"cityName":"Gimpo","cityCd":"GMP"},
{"cityName":"Gongju","cityCd":"GOJ"},
{"cityName":"Goyang","cityCd":"GYG"},
{"cityName":"Gumi","cityCd":"KUM"},
{"cityName":"Gunsan","cityCd":"KUV"},
{"cityName":"Gwangju","cityCd":"KWJ"},
{"cityName":"Gwangyang","cityCd":"KAN"},
{"cityName":"Gyeongju","cityCd":"GJU"},
{"cityName":"Hwaseong","cityCd":"HWS"},
{"cityName":"Icheon","cityCd":"ICE"},
{"cityName":"Jecheon","cityCd":"JCH"},
{"cityName":"Jeju","cityCd":"CHA"},
{"cityName":"Jeongeup","cityCd":"JEO"},
{"cityName":"Jinju","cityCd":"HIN"},
{"cityName":"Masan","cityCd":"MAS"},
{"cityName":"Mokpo","cityCd":"MPK"},
{"cityName":"Namhae-gun","cityCd":"NHE"},
{"cityName":"Osan","cityCd":"OSN"},
{"cityName":"Paju","cityCd":"PJU"},
{"cityName":"Pocheon","cityCd":"POC"},
{"cityName":"Pohang","cityCd":"KPO"},
{"cityName":"Pyeongchang","cityCd":"PYEO"},
{"cityName":"Pyeongtaek","cityCd":"PTK"},
{"cityName":"Sacheon","cityCd":"SAH"},
{"cityName":"Samcheok","cityCd":"SUK"},
{"cityName":"Seogwipo","cityCd":"SPO"},
{"cityName":"Siheung","cityCd":"SHE"},
{"cityName":"Sokcho","cityCd":"SHO"},
{"cityName":"Suncheon","cityCd":"SYS"},
{"cityName":"Suwon","cityCd":"SWU"},
{"cityName":"Taebaek","cityCd":"TBK"},
{"cityName":"Tongyeong","cityCd":"TYG"},
{"cityName":"Ulleung-gun","cityCd":"ULG"},
{"cityName":"Ulsan","cityCd":"USN"},
{"cityName":"Wonju","cityCd":"WJU"},
{"cityName":"Yangsan","cityCd":"YSN"},
{"cityName":"Yangyang","cityCd":"YYNG"},
{"cityName":"Yeongju","cityCd":"YEJ"},
{"cityName":"Yeosu","cityCd":"YOS"},
{"cityName":"Yongin","cityCd":"YNG"},
{"cityName":"Yongsan","cityCd":"ZAC"}
]}

?

  1. Smooth Scroll - 스크롤 이동 ( 속도 , 위치 )

  2. lightBox2 - 레이어 팝업

  3. jQuery Learning Center - 공부 공부

  4. 객체 초기화

  5. .on

  6. select Box option ( 초기화,추가,삭제 )

  7. AutoCompleate - ( JSON + Jquery )

  8. AutoCompleate - ( XML + Jquery )

  9. 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기

  10. SelectBox Option 값 초기화 및 수정 삭제

  11. XML 파싱

  12. 페이지 로딩 속도 개선 - 이미지 로딩처리

  13. Menu Bar

  14. JQuery A to Z

Board Pagination Prev 1 2 3 Next
/ 3