# ListBox 개요
## Content
**ListBox** 컨트롤은 일반 텍스트 또는 HTML을 포함하는 항목 목록을 표시하며, 마우스 또는 키보드를 사용하여 항목을 선택할 수 있습니다. 이것은 멋있는 검색 as-you-type 기능을 가지고 있습니다.
문자열 배열을 사용하거나 객체 배열을 사용하여 ListBox를 채울 수 있는데, 이 경우 **displayMemberPath** 속성에 따라 목록에 표시되는 객체 속성이 결정됩니다. 그리고 **selectedIndex** 속성을 사용하여 현재 선택되어 있는 항목을 확인합니다.
일반 텍스트가 아닌 HTML이 포함된 항목을 표시하려면 **isContentHtml** 속성을 true로 설정하시길 바랍니다.
ListBox 컨트롤은 다음 키보드 명령을 지원합니다:
| Key Combination | Action |
| --------------- | ------ |
| Up/Down | 이전/다음 항목 선택 |
| PageUp/Down | 선택 항목의 한 페이지 위 또는 아래의 항목 선택 |
| Home/End | 첫 번째/마지막 항목 선택 |
| Space | 현재 항목의 체크박스를 전환합니다(checkedMemberPath 속성 확인) |
| Other characters | 입력한 텍스트가 포함된 항목 검색(다중 문자 자동 검색) |
예시: ListBox 컨트롤을 만들고 국가에 대한 정보가 있는 객체 배열을 사용하여 채웁니다. **displayMemberPath** 속성은 \*\*'country'\*\*필드로 설정되어 ListBox에 국가 이름을 표시합니다.
##### HTML
```html
```
##### Javascript
```javascript
onload = function() {
import * as wjInput from '@mescius/wijmo.input';
import { getData } from './data';
function init() {
var theListBox = new wjInput.ListBox('#theListBox', {
displayMemberPath: 'country',
itemsSource: getData()
});
}
```
### Binding to HTML content
예시: 앵커 태그(`html`)의 배열을 사용하고 **isContentHtml** 속성을 true로 설정하여 다양한 메시어스(mescius) 제품에 대한 링크를 나열하는 ListBox 컨트롤을 만듭니다.
##### HTML
```html
MESCIUS Products
```
##### Javascript
```javascript
import * as wjInput from '@mescius/wijmo.input';
function init() {
// ListBox
var theListBox = new wjInput.ListBox('#theListBox', { isContentHtml: true,
itemsSource: getData(),
maxHeight: 200,
selectedIndex: -1
});
// list of Grapecity product pages
function getData() {
return ['Javascript',
'.NET',
'Excel API',
'No Code',
];
}
}
```