add Cell to DOMWidget / autocompletion if using text div

[hainm]

Hi,

I should ask this question on maillist but it's hard to express without an image. So I post here.

Basically I have a DOMWidget (from ipywidgets) that display biomolecule.

I would like to use the DOMWidget in full screen mode and want to add a command text box
in the full screen.

• First, I tried to add Jupyter notebook Cell to that. I was able to add the Cell, something like below

            var cell = Jupyter.notebook.get_selected_cell();
            var cell_el = cell.element;
            cell_el.css("position", "absolute")
                   .css("bottom", "20%")
                   .appendTo(this.$container);

this does not work when running the Cell (the DOMWidget and the Cell were rerun)

• Second, I added a textbox via jquery and able to execute notebook's command (you can see above image).

            $inputNotebookCommand.keypress(function(e){
                var command = $("#input_notebook_command").val();
                if (e.which == 13){
                    $("#input_notebook_command").val("")
                    Jupyter.notebook.kernel.execute(command);
                }
            });

I would like to implement autocompletion for the text box but don't know how.

Can you point me to where I should read? The final aim is to bring a Jupyter cell-like to DOMWidget in
full screen mode. thanks.

Hai

[gnestor]

@SylvainCorlay Any ideas?