1 개요[ | ]
- jQuery-autocomplete 없는 경우 처리
- jQuery autocomplete에서 변형한 예시
- 매칭되는 것이 없는 경우 주황색으로 표시
2 예시[ | ]
html
Copy
<style>
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.autocomplete-selected { background: blue; color: white; }
.autocomplete-suggestions strong { font-weight: bold; color: orange; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
</style>
<input type="text" id="autocomplete">
<div id="outputbox">
<p id="outputcontent">화폐를 선택하면 결과가 출력됨</p>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.min.js'></script>
<script>
var currencies = [
{ value: 'United States dollar', data: 'USD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Japanese yen', data: 'JPY' },
{ value: 'Chinese renminbi', data: 'CNY' },
{ value: 'Hong Kong dollar', data: 'HKD' },
{ value: 'New Taiwan dollar', data: 'TWD' },
{ value: 'British pound', data: 'GBP' },
{ value: 'Omani rial', data: 'OMR' },
{ value: 'Canadian dollar', data: 'CAD' },
{ value: 'Swiss franc', data: 'CHF' },
{ value: 'Swedish krona', data: 'SEK' },
{ value: 'Australian dollar', data: 'AUD' },
{ value: 'New Zealand dollar', data: 'NZD' },
{ value: 'Czech koruna', data: 'CZK' },
{ value: 'Chilean peso', data: 'CLP' },
{ value: 'Turkish new lira', data: 'TRY' },
{ value: 'Mongolian tugrik', data: 'MNT' },
{ value: 'Israeli new sheqel', data: 'ILS' },
{ value: 'Danish krone', data: 'DKK' },
{ value: 'Norwegian krone', data: 'NOK' }
];
function show_info(value, data) {
var content = '<strong>화폐명:</strong> ' + value + ' <br> <strong>기호:</strong> ' + data;
$('#outputcontent').html(content);
}
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
show_info( suggestion.value, suggestion.data );
},
onSearchComplete: function (query, suggestions) {
if( suggestions.length == 0 ) {
show_info( query, '' );
$('#autocomplete').css('background','orange');
} else {
$('#autocomplete').css('background','white');
}
}
});
</script>
3 같이 보기[ | ]
4 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.