Autocomplete with SpreadJS

Question

Я пытаюсь добавить функциональность автозаполнения в столбец SpreadJS, так что, когда пользователь вводит в ячейку, выпадающий список появится с соответствующими элементами, полученными с сервера. Документация SpreadJS гласит:

SpreadJS поддерживает комбинированное окно, флажок, кнопки, текст, гиперссылки, Wijmo редактировать ячейки (AutoCompleteTextBox) и пользовательские типы клеток.

http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/celltypes.html

AutoCompleteTextBox звучит, как это может сделать трюк; однако я не могу найти документацию или образцы, демонстрирующие, как это можно достичь. Я мог бы создать собственный тип ячейки, но если я смогу использовать функциональность, которая уже существует, это будет намного лучше!

Кто-нибудь знает, как я могу это реализовать?

Спасибо, Скотти

Answer 1

У меня тоже была такая же проблема, но я модифицировал TextCellType для использования автозаполнения jQueryUI.

<div> 
    <input type='hidden' id="dropDownCellInfo" /> 
    <div id="ss" style="height:500px;border:solid gray 1px;"/> 
    </div> 

Вы можете передать jQuery UI documentation узнать больше об использовании автозаполнения виджета. В приведенном ниже коде создается TextCellType и переопределяет его метод редактора создания, чтобы создать текстовый элемент и инициализировать его с помощью автозаполнения 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); 

Answer 2

Я связался Wijmo: это опечатка в документации. However, they did very helpfully provide an example using a custom cell type to achieve similar functionality.