같은 문제가 있었지만 jQueryUI 자동 완성을 사용하기 위해 TextCellType을 수정했습니다.
<div>
<input type='hidden' id="dropDownCellInfo" />
<div id="ss" style="height:500px;border:solid gray 1px;"/>
</div>
당신은 자동 완성 위젯을 사용하는 방법에 대한 자세한 내용을 알고하는 jQuery UI documentation를 참조 할 수 있습니다. 아래 코드는 TextCellType을 만들고 오버 라이더 create editor 메서드를 재정 의하여 텍스트 요소를 만들고 jQuery 자동 완성을 사용하여 초기화합니다.
목록에서 옵션을 선택한 후 값을 업데이트해야하는 행과 열을 캡처하기 위해 숨겨진 텍스트 요소를 사용해야했습니다. 더 나은 방법이있을 수도 있지만 이것이 효과가 있습니다.
var cellType = new $.wijmo.wijspread.TextCellType();
cellType.createEditorElement = function(context)
{
var obj = jQuery('#dropDownCellInfo');
obj.data('sheet' , context.sheet);
obj.data('row', context.row);
obj.data('col', context.col);
console.log(context);
var $textarea = $('<input type="text" id="txtSearch" style="visible:false" />');
var editor = document.createElement("div");
$(editor).append($textarea);
$textarea.autocomplete({
minLength: 2,
autoFocus : true,
source: 'http://localhost/spreadjs/index.php',
focus: function(event, ui) {
$("#txtSearch").val(ui.item.inst_name);
return false;
},
select: function(event, ui) {
$("#txtSearch").val(ui.item.inst_name);
var obj = jQuery('#dropDownCellInfo');
var spd = jQuery("#ss").wijspread("spread").getActiveSheet().setActiveCell(obj.data('row'),obj.data('col'));
// We have to explicitly remove the list element from the DOM because some
// how the method creates a new list for each autocomplete request and does not deletes the list after onSelect event.
jQuery('ul.ui-autocomplete').remove();
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.inst_name + "</a>")
.appendTo(ul);
};
return editor
};
sheet.getColumn(3).cellType(cellType);