jQuery + json 연동 Autocomplete 예제
test Url : http://www.uhoon.co.kr/test/773.html
기타 옵션 API : http://api.jqueryui.com , http://docs.jquery.com
- 검색 중
- 선택 후
<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"} ]}