JQuery autocomplete 없는 경우 처리

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 참고[ | ]