[API/UI]

Suggest

개요

Suggest 클래스는 서제스트를 제공하기 위한 private 클래스입니다.
이 클래스는 단독으로 사용할 수 없고 Combo 클래스의 부속 클래스로서 사용됩니다.
     
Suggest 클래스의 주요 기능은 다음과 같습니다.
1. NodeList 클래스에서 생성한 NodeList를 기준으로 suggest NodeList를 생성합니다.
    - showFields에 다수의 필드를 지정한 경우 wrapper 엘리먼트를 만들고
       필드 각각에 대해 엘리먼트를 만들어 wrapper 엘리먼트의 차일드 엘리먼트로 첨부합니다.
    - 필드를 하나만 지정한 경우에는 wrapper 엘리먼트를 만들지 않습니다.

2. 서제스트 입력 창에서 입력한 값을 비교할 수 있도록 텍스트 형태의 NodeList를 생성합니다.

3. 서제스트 입력 창에서 입력한 값과 2번에서 생성한 NodeList 값을 비교하여 일치하는 Node를 추출합니다.    

4. Combo 클래스는 입력과 전체적인 제어를 담당하고 Suggest는 이벤트 발생, 값 비교를 담당합니다.
Options Component
ccode {String} combo.Suggest
component code : 'suggest'
detailData {JSON} data.MetaFilter
MetaData.detail 추출 결과
eventNode {HTMLElement|String} combo.NodeLIst
이벤트를 설정할 HTMLElement 또는 #id
지정하지 않으면 inside 엘리먼트가 설정됩니다.
filterData {Function} data.MetaFilter
MetaData.detail 데이터 추출 메소드
MetaData.detail 데이터를 추출하려는 조건을 함수로 작성합니다.
filterData() 함수 실행 결과를 detailData에 설정하고 이를 MetaData.detail로 사용합니다.
MetaData.detail 데이터가 변경되는 것은 아닙니다.

JSON 형태의 MetaData.Detail 전체 데이터를 파라미터로 넘겨 줍니다.
return도 JSON 형태이어야 합니다.

example
filterData: function(meta){
      var filter = [];
      mc.eachArray(meta, function(data){
          if (data.elglish == 'baseball'){
              filter[filter.length] = data;
          }
      }, this)
      return filter;
}
filterRow {Function} data.MetaFilter
MetaData.detail 데이터 추출 메소드
MetaData.detail 데이터를 추출하려는 조건을 함수로 작성합니다.
filterRow() 함수 실행 결과를 detailData에 설정하고 이를 MetaData.detail로 사용합니다.
MetaData.detail 데이터가 변경되는 것은 아닙니다.

MetaData.Detail을 row 단위로 반복하면서 Hash 형태의 row와 JSON index를 파라미터로 제공합니다.
Hash를 return하면 Metadata.detail의 row로 사용하고, false를 return하면 데이터에서 제외시킵니다.

sample
var sportsData = [
      ['code1', 'baseball'],
      ['code2', 'basketball']
];
var sportsFormat = new mc.data.ArrayFormat([
      {index: 0, field: 'id'},
      {index: 1, field: 'english'}
);
filterRow:  function(meta, index){
      return meta.elglish == 'baseball' ? meta : false;
}
insideClass {String} combo.NodeLIst
inside 엘리먼트에 적용할 className
insideStyle {Hash} combo.NodeLIst
inside 엘리먼트에 적용할 style
maxNodes {Number} combo.Suggest
서제스트에 표시할 최대 노드수. default: 7
표시할 데이터가 maxNodes보다 많으면 스크롤 바가 표시됩니다.
metaData {JSON} data.MetaFilter
Meta Data
MetaData 클래스로 생성한 MetaData 오브젝트(인스턴스) 또는 MetaData.detail을 지정
nodeOverClass {String} combo.Suggest
노드에 mouse가 over되었을 때 설정할 className
default: 'mc-combo-over'
nodeTemplate {String} data.MetaFilter
NodeList를 생성하기 위한 default 템플릿
템플릿을 변경하는 경우 작성되어 있는 속성을 포함시켜야 합니다.
outsideClass {String} combo.NodeLIst
outside 엘리먼트에 적용할 className
outsideStyle {Hash} combo.NodeLIst
outside 엘리먼트에 적용할 style
overClass {String} combo.NodeLIst
mouseover가 발생했을 때 콤보박스 노드에 설정할 className
parentBox {HTMLElement} combo.Suggest
suggest NodeList를 포함할 parent Element
prefix {String} combo.Suggest
id 접두사. default: 'mc_suggest_'
showFields {JSON} combo.NodeLIst
NodeList에 적용할 field 속성 집합
showFields는 NodeList 생성 기준이 되는 field 속성을 포함한 JSON 형태의 오브젝트입니다.
showFields를 작성하지 않으면 'E1010' 메시지가 표시됩니다.

example:
field에 width, style, className을 지정할 수 있습니다.
      showFields: [{field: 'code', width: 90, style: '', className: ''},
                          {field: 'korean', width: 100}]
showFields.field {Array|String} combo.NodeLIst
NodeList 생성 기준 필드
DataFormat에 작성한 field 중에서 NodeList에 표시할 field를 지정합니다.
DataFormat 작성 순서가 아닌 showFields.field에 작성한 순서로 NodeList에 표현됩니다.
     
example:
DataFormat을 sportsFormat과 같이 작성한 형태에서
  var sportsFormat = new mc.data.ArrayFormat([
      {index: 0, field: 'code'},
      {index: 1, field: 'english'},
      {index: 2, field: 'korean'}]
  );

showFields: [{field: 'code'}, {field: 'korean'}, {field: 'english'}]와 같이
korean과 english 순서를 바꿔서 지정하면 code, korean, english 순서로 표시됩니다.
showFields.width {Array} combo.NodeLIst
NodeList 각 Node(field)에 적용할 width
suggestClass {String} combo.Suggest
서제스트 엘리먼트에 설정할 className
default: 'mc-combo-box'
suggestField {String} combo.Suggest
서제스트 대상 필드
서제스트 입력 필드에서 값을 입력하면 같은 값을 가진 노드를 표시하게 됩니다.
이때 입력한 값과 suggestField로 지정한 노드의 값을 비교하게 됩니다.
suggestField를 지정하지 않으면 showFields의 첫 번째 필드와 비교를 행합니다.
showFields에 suggestField가 존재하지 않으면 'E1020' 에러 메시지가 표시됩니다.
suggestOutsideClass {String} combo.Suggest
suggest outside 엘리먼트에 설정할 className
default: 'mc-combo-outside'
width {Number} combo.NodeLIst
NodeList 전체 Width. default: 300
NodeList row에 다수의 Node가 표시되는 경우 전체 width를 지정합니다.
wrapClass {String} combo.NodeLIst
wrapper 엘리먼트에 적용할 className
Row에 표시할 Node가 다수인 경우 이 전체를 포함할 wrapper 엘리먼트를 생성합니다.
wrapStyle {String} combo.NodeLIst
wrapper 엘리먼트에 적용할 style
wrapTemplate {String} combo.NodeLIst
wrapper Node 템플릿
템플릿을 변경하는 경우 작성되어 있는 속성을 포함시켜야 합니다.
default: <div id="{wrapID}" class="{wrapClass}" "{wrapStyle}">
Method Component
clearData ()
clearData()
datailData를 clear합니다.
Parameters :
• 없음
Returns :
• 없음
data.MetaFilter
datailData를 clear합니다.
clearList ()
clearList()
this.suggestList와 this.textList를 clear합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
this.suggestList와 this.textList를 clear합니다.
filterData (JSON)
filterData(metadata)
MetaData.detail 전체 데이터 추출을 위한 오버라이드용
메소드입니다.
이 메소드 이름으로 오버라이드한 경우에만 실행합니다.
Parameters :
• {JSON} metadata, MetaData.detail 전체
Returns :
• 없음
data.MetaFilter
MetaData.detail 전체 데이터 추출을 위한 오버라이드용 메소드입니다.
filterRow (Hash, Number)
filterRow(row, index)
MetaData.detail 데이터를 row 단위로 추출할 오버라이드용
메소드입니다.
Parameters :
• {Hash} row, MetaData.detail row
• {Number} index, MetaData.detail index
Returns :
• 없음
data.MetaFilter
MetaData.detail 데이터를 row 단위로 추출할 오버라이드용 메소드입니다.
getAllData () : JSON
getAllData()
MetaData.Detail 데이터에서 추출한 datailData를 반환합니다.
Parameters :
• 없음
Returns :
• {JSON} 추출 결과
data.MetaFilter
MetaData.Detail 데이터에서 추출한 datailData를 반환합니다.
getChildNodes (Number) : NodeList
getChildNodes(index)
showFields에 다수의 필드를 지정한 경우에 실행하며
index번째의 child 노드를 반환합니다.
Parameters :
• {Number} index, child node의 index번째를 추출
Returns :
• {NodeList}
combo.NodeLIst
showFields에 다수의 필드를 지정한 경우에 실행하며 index번째의 child 노드를 반환합니다.
getChoiceLength () : Number
getChoiceLength()
서제스트에 설정된 전체 row 수를 반환합니다.
Parameters :
• 없음
Returns :
• {Number} 실행 결과 length
combo.Suggest
서제스트에 설정된 전체 row 수를 반환합니다.
getData (Number, Number, String) : JSON
getData(start, end, ad)
지정한 인덱스 범위의 데이터를 승순/역순으로 반환합니다
A을 지정하면 데이터가 만들어진 순서로 반환하고
D를 지정하면 만들어진 데이터의 끝에서부터 반환합니다.
승순/역순이라고 해서 값을 sort해서 반환하는 것은 아닙니다.
Parameters :
• {Number} start, 시작 인덱스. default: 0
• {Number} end, 끝 인덱스. default: length - 1
• {String} ascDesc, 승순/역순, default: 승순
A: 승순, D: 역순
Returns :
• {JSON} 추출 결과
data.MetaFilter
지정한 인덱스 범위의 데이터를 승순 또는 역순으로 반환합니다.
getFieldCount () : Number
getFieldCount()
showFields의 field 수를 반환합니다.
Parameters :
• 없음
Returns :
• {Number}
combo.NodeLIst
showFields의 field 수를 반환합니다.
getFieldTotal (String) : Number
getFieldTotal(pty)
showFields에서 지정한 프로퍼티 값을 합산하여 반환합니다.
Parameters :
• {String} pty, showFields의 property
Returns :
• {Number}
combo.NodeLIst
showFields에서 지정한 프로퍼티 값을 합산하여 반환합니다.
getFieldValue (Number, String) : String/Number
getFieldValue(index, pty)
showFields에서 지정한 프로퍼티 값을 반환합니다.
Parameters :
• {Number} index, showFields index
• {String} pty, showFields property
Returns :
• {String|Number}
combo.NodeLIst
showFields에서 지정한 프로퍼티 값을 반환합니다.
getId (String) : HTMLElement
getId(id)
this.suggestList에서 지정한 id가 같은 엘리먼트를 반환합니다.
Parameters :
• {String} id, 엘리먼트 id
Returns :
• {HTMLElement|Null} 추출한 엘리먼트. 존재하지 않으면 null
combo.Suggest
this.suggestList에서 지정한 id가 같은 엘리먼트를 반환합니다.
getIndex (Number) : Hash
getIndex(ix)
지정한 인덱스 번째의 데이터를 반환합니다.
인덱스를 지정하지 않으면 첫 번째 데이터가 반환됩니다.
Parameters :
• {Number} index, 인덱스. default: 0
Returns :
• {Hash} 인덱스 번째 Hash 형태의 row
data.MetaFilter
지정한 인덱스 번째의 데이터를 반환합니다.
getIndexChoice (Number) : HTMLElement
getIndexChoice(ix)
choiceList에서 지정한 인덱스 번째의 노드를 반환합니다.
인덱스를 지정하지 않으면 첫 번째 노드가 반환됩니다.
Parameters :
• {Number} index, 인덱스. default: 0
Returns :
• {HTMLElement} 추출한 엘리먼트
combo.Suggest
choiceList에서 지정한 인덱스 번째의 노드를 반환합니다.
getIndexNode (Number) : HTMLElement
getIndexNode(index)
지정한 인덱스 번째의 노드를 반환합니다.
인덱스를 지정하지 않으면 첫 번째 노드가 반환됩니다.
Parameters :
• {Number} index, default: 0
Returns :
• {HTMLElement} 추출한 엘리먼트
combo.Suggest
지정한 인덱스 번째의 노드를 반환합니다.
getIndexNodes (Number, Number, String) : NodeList
getIndexNodes(start, end, ad)
지정한 인덱스 범위에 속한 노드를 승순/역순으로 반환합니다.
Parameters :
• {Number} start, 시작 인덱스. default: 0
• {Number} end, 끝 인덱스. default: length - 1
• {String} ascDesc, 승순/역순, default: 승순
A: 승순, D: 역순
Returns :
• {NodeList} 추출한 NodeList
combo.Suggest
지정한 인덱스 범위에 속한 노드를 승순/역순으로 반환합니다.
getIndexText (Number) : String
getIndexText(ix)
textList에서 지정한 인덱스 번째의 텍스트를 반환합니다.
인덱스를 지정하지 않으면 첫 번째 텍스트가 반환됩니다.
Parameters :
• {Number} index, 인덱스. default: 0
Returns :
• {String} 인덱스 번째의 텍스트
combo.Suggest
textList에서 지정한 인덱스 번째의 텍스트를 반환합니다.
getInside () : HTMLElement
getInside()
inside 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
combo.NodeLIst
inside 엘리먼트를 반환합니다.
getLength () : Number
getLength()
MetaData.Detail 데이터에서 추출한 datailData 건수를 반환합니다.
Parameters :
• 없음
Returns :
• {Number} 실행 결과 length
data.MetaFilter
MetaData.Detail 데이터에서 추출한 datailData 건수를 반환합니다.
getList (Boolean) : HTMLElement
getList(tg)
this.nodeList 또는 this.textList를 반환합니다.
Parameters :
• {Boolean} target, 반환 대상 NodeList
false: this.nodeList, true: this.textList
Returns :
• {HTMLElement} 엘리먼트
combo.Suggest
this.nodeList 또는 this.textList를 반환합니다.
getNodeCount () : Number
getNodeCount()
NodeList의 Node수를 반환합니다.
Parameters :
• 없음
Returns :
• {Number}
combo.NodeLIst
NodeList의 Node수를 반환합니다.
getNodes () : NodeList
getNodes()
NodeList 전체를 반환합니다.
단, showFields에 복수의 필드를 지정한 경우 wrapper 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {NodeList}
combo.NodeLIst
NodeList 전체를 반환합니다.
getOutside () : HTMLElement
getOutside()
outside 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
combo.NodeLIst
outside 엘리먼트를 반환합니다.
getTargetIndex () : Number
getTargetIndex()
showFields에서 suggestField에 지정한 값과 매치되는
인덱스를 반환합니다.
Parameters :
• 없음
Returns :
• {Number}
combo.Suggest
showFields에서 suggestField에 지정한 값과 매치되는 인덱스를 반환합니다.
getTextNodes (Number) : NodeLIst
getTextNodes(index)
NodeList에서 index번째에 지정한 NodeList 전체를 반환합니다.
Parameters :
• {Number} index
Returns :
• {NodeLIst}
combo.NodeLIst
NodeList에서 index번째에 지정한 NodeList 전체를 반환합니다.
hideOutside ()
hideOutside()
오버라이드용 메소드이며 outside 엘리먼트를 숨길 때
사용합니다.
Parameters :
• 없음
Returns :
• 없음
combo.NodeList
오버라이드용 메소드이며 outside 엘리먼트를 숨길 때 사용합니다.
initValue ()
initValue()
ComboBox 제어를 위한 프로퍼티 값을 초기화한다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
ComboBox 제어를 위한 프로퍼티 값을 초기화한다.
isChoiced () : Boolean
isChoiced()
서제스트 노드의 선택 여부를 반환합니다.
Parameters :
• 없음
Returns :
• {Boolean} true: 선택함, false: 선택하지 않음
combo.Suggest
서제스트 노드의 선택 여부를 반환합니다.
isExistValue (String) : Boolean
isExistValue(vl)
입력한 값의 서제스트 존재 여부를 반환합니다.
Parameters :
• {String} value, 체크할 값
Returns :
• {Boolean} true: 존재, false: 존재하지 않음
combo.Suggest
입력한 값의 서제스트 존재 여부를 반환합니다.
isVisible () : Boolean
isVisible()
서제스트의 표시/비표시 상태를 반환합니다.
Parameters :
• 없음
Returns :
• {Boolean} true: 표시, false: 비표시
combo.Suggest
서제스트의 표시/비표시 상태를 반환합니다.
moveScroll ()
moveScroll()
커서가 위치한 곳으로 스크롤 바를 이동한다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
커서가 위치한 곳으로 스크롤 바를 이동한다.
nextNode ()
nextNode()
서제스트가 표시된 상태에서 down key를 눌렀을 때 실행합니다.
서제스트의 다음 노드로 커서를 이동합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
서제스트가 표시된 상태에서 down key를 눌렀을 때 실행합니다.
removeEvents ()
removeEvents()
Suggest 클래스에서 설정한 이벤트를 해제합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
Suggest 클래스에서 설정한 이벤트를 해제합니다.
resetReady ()
resetReady()
Esc key를 눌렀을 때 실행합니다.
입력한 값을 지우고 서제스트를 숨김 상태로 변경합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
Esc key를 눌렀을 때 실행합니다.
setChoiceNode (Number)
setChoiceNode(index)
지정한 인덱스 번째의 노드에 nodeOverClass을 설정합니다.
Parameters :
• {Number} index, this.choiceList 인덱스
Returns :
• 없음
combo.Suggest
지정한 인덱스 번째의 노드에 nodeOverClass을 설정합니다.
setEvents ()
setEvents()
Suggest 클래스에서 사용하는 이벤트를 설정합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
Suggest 클래스에서 사용하는 이벤트를 설정합니다.
setSuggestHeight ()
setSuggestHeight()
서제스트 높이를 설정합니다.
Parameters :
• 없음
Returns :
• 없음
combo.Suggest
서제스트 높이를 설정합니다.
Custom Event Component
clearData (Object this) data.MetaFilter
datailData를 clear 할 때 fire 됩니다.
clearList (Object this) combo.Suggest
this.suggestList와 this.textList를 clear할 때 fire 됩니다.
click (EventObject e, HTMLElement tg, Object this) combo.Suggest
서제스트에서 노드를 click했을 때 fire됩니다.
filteredData (Hash detaildata, Object this) data.MetaFilter
MetaData.detail에 조건을 지정하여 추출을 완료하였을 때 fire됩니다.
mouseout (EventObject e, HTMLElement tg, Object this) combo.Suggest
서제스트 노드에서 mouseout 이벤트가 발생했을 때 fire 됩니다.
mouseover (EventObject e, HTMLElement tg, Object this) combo.Suggest
서제스트 노드에서 mouseover가 발생했을 때 fire 됩니다.
noData (Object this) data.MetaFilter
MetaData.detail 데이터가 없을 때 fire 됩니다.
renderData (Object this) combo.NodeList
NodeList 생성을 완료했을 때 fire됩니다.