UNPKG

coffeescript-ui

Version:
696 lines (674 loc) 24.4 kB
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Coffeescript-UI Documentation</title> <script src='../../javascript/application.js'></script> <script src='../../javascript/search.js'></script> <link rel='stylesheet' href='../../stylesheets/application.css' type='text/css'> </head> <body> <div id='base' data-path='../../'></div> <div id='header'> <div id='menu'> <a href='../../alphabetical_index.html' title='Index'> Index </a> &raquo; <span class='title'>CUI</span> &raquo; <span class='title'>ListViewTree</span> </div> </div> <div id='content'> <h1> Class: CUI.ListViewTree </h1> <table class='box'> <tr> <td>Defined in:</td> <td>elements&#47;ListView&#47;ListViewTree.coffee</td> </tr> <tr> <td>Inherits:</td> <td> <a href='../../class/CUI/ListView.html'>CUI.ListView</a> </td> </tr> </table> <h2>Overview</h2> <div class='docstring'> <ul> <li>coffeescript-ui - Coffeescript User Interface System (CUI)</li> <li>Copyright (c) 2013 - 2016 Programmfabrik GmbH</li> <li>MIT Licence</li> <li><a href="https://github.com/programmfabrik/coffeescript-ui">https://github.com/programmfabrik/coffeescript-ui</a>, <a href="http://www.coffeescript-ui.org">http://www.coffeescript-ui.org</a></li> </ul> </div> <div class='tags'> </div> <h2>Direct Known Subclasses</h2> <p class='children'> <a href='../../class/CUI/ObjectDumper.html'>CUI.ObjectDumper</a> </p> <h2>Variables Summary</h2> <h3 class='inherited'> Variable inherited from <a href='../../class/CUI/ListView.html'>CUI.ListView</a> </h3> <p class='inherited'> <a href='../../class/CUI/ListView.html#defaults-variable'>defaults</a> <a href='../../class/CUI/ListView.html#counter-variable'>counter</a> <a href='../../class/CUI/Element.html#uniqueId-variable'>uniqueId</a> </p> <h2>Instance Method Summary</h2> <ul class='summary'> <li> <span class='signature'> <a href='#initOpts-dynamic'> # (void) <b>initOpts</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#readOpts-dynamic'> # (void) <b>readOpts</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#getRowMoveTool-dynamic'> # (void) <b>getRowMoveTool</b><span>(opts = {})</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#initListView-dynamic'> # (void) <b>initListView</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#isSelectable-dynamic'> # (void) <b>isSelectable</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#isNoHierarchy-dynamic'> # (void) <b>isNoHierarchy</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#triggerNodeDeselect-dynamic'> # (void) <b>triggerNodeDeselect</b><span>(ev, node)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#triggerNodeSelect-dynamic'> # (void) <b>triggerNodeSelect</b><span>(ev, node)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#render-dynamic'> # (void) <b>render</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#toggleNode-dynamic'> # (void) <b>toggleNode</b><span>(ev, node)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#__runTrigger-dynamic'> # (void) <b>__runTrigger</b><span>(ev, action, node)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#__actionOnNode-dynamic'> # (void) <b>__actionOnNode</b><span>(ev, action, node)</span> </a> </span> <span class='bound note title'>Bound</span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#getNodesForMove-dynamic'> # (void) <b>getNodesForMove</b><span>(from_i, to_i, after)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#moveRow-dynamic'> # (void) <b>moveRow</b><span>(from_i, to_i, after)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#getRootChildren-dynamic'> # (void) <b>getRootChildren</b><span>()</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#getSelectedNode-dynamic'> # (void) <b>getSelectedNode</b><span>(key = &quot;selectedNode&quot;)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#prependNode-dynamic'> # (void) <b>prependNode</b><span>(node)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#addNode-dynamic'> # (void) <b>addNode</b><span>(node, append = true)</span> </a> </span> <span class='desc'> </span> </li> <li> <span class='signature'> <a href='#openTreeNodeByRowDisplayIndex-dynamic'> # (void) <b>openTreeNodeByRowDisplayIndex</b><span>(index)</span> </a> </span> <span class='desc'> </span> </li> </ul> <h2> <small>Inherited Method Summary</small> <h3 class='inherited'> Methods inherited from <a href='../../class/CUI/ListView.html'>CUI.ListView</a> </h3> <p class='inherited'> <a href='../../class/CUI/ListView.html#initListView-dynamic'>#initListView</a> <a href='../../class/CUI/ListView.html#initOpts-dynamic'>#initOpts</a> <a href='../../class/CUI/ListView.html#readOpts-dynamic'>#readOpts</a> <a href='../../class/CUI/ListView.html#destroy-dynamic'>#destroy</a> <a href='../../class/CUI/ListView.html#getListViewClass-dynamic'>#getListViewClass</a> <a href='../../class/CUI/ListView.html#getGrid-dynamic'>#getGrid</a> <a href='../../class/CUI/ListView.html#hasResizableColumns-dynamic'>#hasResizableColumns</a> <a href='../../class/CUI/ListView.html#hasMovableRows-dynamic'>#hasMovableRows</a> <a href='../../class/CUI/ListView.html#isInactive-dynamic'>#isInactive</a> <a href='../../class/CUI/ListView.html#setInactive-dynamic'>#setInactive</a> <a href='../../class/CUI/ListView.html#render-dynamic'>#render</a> <a href='../../class/CUI/ListView.html#__getScrolling-dynamic'>#__getScrolling</a> <a href='../../class/CUI/ListView.html#getScrollingContainer-dynamic'>#getScrollingContainer</a> <a href='../../class/CUI/ListView.html#__setScrolling-dynamic'>#__setScrolling</a> <a href='../../class/CUI/ListView.html#__syncScrolling-dynamic'>#__syncScrolling</a> <a href='../../class/CUI/ListView.html#__setMargins-dynamic'>#__setMargins</a> <a href='../../class/CUI/ListView.html#getSelectedRows-dynamic'>#getSelectedRows</a> <a href='../../class/CUI/ListView.html#hasSelectableRows-dynamic'>#hasSelectableRows</a> <a href='../../class/CUI/ListView.html#selectRowById-dynamic'>#selectRowById</a> <a href='../../class/CUI/ListView.html#selectRowByDisplayIdx-dynamic'>#selectRowByDisplayIdx</a> <a href='../../class/CUI/ListView.html#selectRow-dynamic'>#selectRow</a> <a href='../../class/CUI/ListView.html#getCellByTarget-dynamic'>#getCellByTarget</a> <a href='../../class/CUI/ListView.html#getRowMoveTool-dynamic'>#getRowMoveTool</a> <a href='../../class/CUI/ListView.html#getListViewRow-dynamic'>#getListViewRow</a> <a href='../../class/CUI/ListView.html#getDisplayColIdx-dynamic'>#getDisplayColIdx</a> <a href='../../class/CUI/ListView.html#getDisplayRowIdx-dynamic'>#getDisplayRowIdx</a> <a href='../../class/CUI/ListView.html#getColIdx-dynamic'>#getColIdx</a> <a href='../../class/CUI/ListView.html#getRowIdx-dynamic'>#getRowIdx</a> <a href='../../class/CUI/ListView.html#moveInOrderArray-dynamic'>#moveInOrderArray</a> <a href='../../class/CUI/ListView.html#moveRow-dynamic'>#moveRow</a> <a href='../../class/CUI/ListView.html#rowAddClass-dynamic'>#rowAddClass</a> <a href='../../class/CUI/ListView.html#rowRemoveClass-dynamic'>#rowRemoveClass</a> <a href='../../class/CUI/ListView.html#getColdef-dynamic'>#getColdef</a> <a href='../../class/CUI/ListView.html#getColsCount-dynamic'>#getColsCount</a> <a href='../../class/CUI/ListView.html#resetColWidth-dynamic'>#resetColWidth</a> <a href='../../class/CUI/ListView.html#setColWidth-dynamic'>#setColWidth</a> <a href='../../class/CUI/ListView.html#getManualColWidth-dynamic'>#getManualColWidth</a> <a href='../../class/CUI/ListView.html#getRowHeight-dynamic'>#getRowHeight</a> <a href='../../class/CUI/ListView.html#getColWidth-dynamic'>#getColWidth</a> <a href='../../class/CUI/ListView.html#getCellGridRect-dynamic'>#getCellGridRect</a> <a href='../../class/CUI/ListView.html#getRowGridRect-dynamic'>#getRowGridRect</a> <a href='../../class/CUI/ListView.html#appendRow-dynamic'>#appendRow</a> <a href='../../class/CUI/ListView.html#prependRow-dynamic'>#prependRow</a> <a href='../../class/CUI/ListView.html#replaceRow-dynamic'>#replaceRow</a> <a href='../../class/CUI/ListView.html#insertRowAt-dynamic'>#insertRowAt</a> <a href='../../class/CUI/ListView.html#insertRowAfter-dynamic'>#insertRowAfter</a> <a href='../../class/CUI/ListView.html#insertRowBefore-dynamic'>#insertRowBefore</a> <a href='../../class/CUI/ListView.html#removeAllRows-dynamic'>#removeAllRows</a> <a href='../../class/CUI/ListView.html#removeDeferredRow-dynamic'>#removeDeferredRow</a> <a href='../../class/CUI/ListView.html#removeRow-dynamic'>#removeRow</a> <a href='../../class/CUI/ListView.html#appendDeferredRows-dynamic'>#appendDeferredRows</a> <a href='../../class/CUI/ListView.html#getRow-dynamic'>#getRow</a> <a href='../../class/CUI/ListView.html#getBottom-dynamic'>#getBottom</a> <a href='../../class/CUI/ListView.html#getTop-dynamic'>#getTop</a> <a href='../../class/CUI/ListView.html#__scheduleLayout-dynamic'>#__scheduleLayout</a> <a href='../../class/CUI/ListView.html#layoutIsStopped-dynamic'>#layoutIsStopped</a> <a href='../../class/CUI/ListView.html#stopLayout-dynamic'>#stopLayout</a> <a href='../../class/CUI/ListView.html#startLayout-dynamic'>#startLayout</a> <a href='../../class/CUI/ListView.html#__doLayout-dynamic'>#__doLayout</a> <a href='../../class/CUI/ListView.html#__addRowsOddEvenClasses-dynamic'>#__addRowsOddEvenClasses</a> <a href='../../class/CUI/ListView.html#__getValue-dynamic'>#__getValue</a> <a href='../../class/CUI/ListView.html#hideWaitBlock-dynamic'>#hideWaitBlock</a> <a href='../../class/CUI/ListView.html#showWaitBlock-dynamic'>#showWaitBlock</a> <a href='../../class/CUI/ListView.html#__debugRect-dynamic'>#__debugRect</a> <a href='../../class/CUI/ListView.html#appendRows-dynamic'>#appendRows</a> <a href='../../class/CUI/ListView.html#__getColsFromAndTo-dynamic'>#__getColsFromAndTo</a> <a href='../../class/CUI/ListView.html#__deferRow-dynamic'>#__deferRow</a> <a href='../../class/CUI/ListView.html#__addRow-dynamic'>#__addRow</a> <a href='../../class/CUI/ListView.html#__getQuadrants-dynamic'>#__getQuadrants</a> <a href='../../class/CUI/ListView.html#__addRows-dynamic'>#__addRows</a> <a href='../../class/CUI/ListView.html#__appendCells-dynamic'>#__appendCells</a> <a href='../../class/CUI/ListView.html#__getColClass-dynamic'>#__getColClass</a> <a href='../../class/CUI/ListView.html#__resetRowDim-dynamic'>#__resetRowDim</a> <a href='../../class/CUI/ListView.html#__resetCellStyle-dynamic'>#__resetCellStyle</a> <a href='../../class/CUI/ListView.html#__resetColWidth-dynamic'>#__resetColWidth</a> <a href='../../class/CUI/ListView.html#__resetCellDims-dynamic'>#__resetCellDims</a> <a href='../../class/CUI/ListView.html#__isMaximizedCol-dynamic'>#__isMaximizedCol</a> <a href='../../class/CUI/ListView.html#__getColWidth-dynamic'>#__getColWidth</a> <a href='../../class/CUI/ListView.html#__debugCall-dynamic'>#__debugCall</a> <a href='../../class/CUI/ListView.html#__addDebugControl-dynamic'>#__addDebugControl</a> <a href='../../class/CUI/SimplePane.html#__init-dynamic'>#__init</a> <a href='../../class/CUI/SimplePane.html#forceHeader-dynamic'>#forceHeader</a> <a href='../../class/CUI/SimplePane.html#forceFooter-dynamic'>#forceFooter</a> <a href='../../class/CUI/SimplePane.html#hasHeader-dynamic'>#hasHeader</a> <a href='../../class/CUI/SimplePane.html#hasFooter-dynamic'>#hasFooter</a> <a href='../../class/CUI/SimplePane.html#getPaneAndKey-dynamic'>#getPaneAndKey</a> <a href='../../class/CUI/SimplePane.html#empty-dynamic'>#empty</a> <a href='../../class/CUI/SimplePane.html#append-dynamic'>#append</a> <a href='../../class/CUI/SimplePane.html#replace-dynamic'>#replace</a> <a href='../../class/CUI/Pane.html#getFillScreenState-dynamic'>#getFillScreenState</a> <a href='../../class/CUI/Pane.html#endFillScreen-dynamic'>#endFillScreen</a> <a href='../../class/CUI/Pane.html#startFillScreen-dynamic'>#startFillScreen</a> <a href='../../class/CUI/Pane.html#toggleFillScreen-dynamic'>#toggleFillScreen</a> <a href='../../class/CUI/Pane.html#getToggleFillScreenButton-static'>.getToggleFillScreenButton</a> <a href='../../class/CUI/VerticalLayout.html#getName-dynamic'>#getName</a> <a href='../../class/CUI/VerticalLayout.html#getMapPrefix-dynamic'>#getMapPrefix</a> <a href='../../class/CUI/VerticalLayout.html#hasFlexHandles-dynamic'>#hasFlexHandles</a> <a href='../../class/CUI/VerticalLayout.html#getPanes-dynamic'>#getPanes</a> <a href='../../class/CUI/VerticalLayout.html#getSupportedPanes-dynamic'>#getSupportedPanes</a> <a href='../../class/CUI/Layout.html#maximizeAddClasses-dynamic'>#maximizeAddClasses</a> <a href='../../class/CUI/Layout.html#maximizeReadOpts-dynamic'>#maximizeReadOpts</a> <a href='../../class/CUI/Layout.html#init-dynamic'>#init</a> <a href='../../class/CUI/Layout.html#getTemplateMap-dynamic'>#getTemplateMap</a> <a href='../../class/CUI/Layout.html#__initPane-dynamic'>#__initPane</a> <a href='../../class/CUI/Layout.html#initDefaultPanes-dynamic'>#initDefaultPanes</a> <a href='../../class/CUI/Layout.html#getLayout-dynamic'>#getLayout</a> <a href='../../class/CUI/Layout.html#getButtonbar-dynamic'>#getButtonbar</a> <a href='../../class/CUI/Layout.html#__callAutoButtonbar-dynamic'>#__callAutoButtonbar</a> <a href='../../class/CUI/Layout.html#setAbsolute-dynamic'>#setAbsolute</a> <a href='../../class/CUI/Layout.html#unsetAbsolute-dynamic'>#unsetAbsolute</a> <a href='../../class/CUI/Layout.html#__all-static'>.__all</a> <a href='../../class/CUI/Layout.html#all-static'>.all</a> <a href='../../class/CUI/DOMElement.html#registerTemplate-dynamic'>#registerTemplate</a> <a href='../../class/CUI/DOMElement.html#getDOMElementClasses-dynamic'>#getDOMElementClasses</a> <a href='../../class/CUI/DOMElement.html#registerDOMElement-dynamic'>#registerDOMElement</a> <a href='../../class/CUI/DOMElement.html#getElementForLayer-dynamic'>#getElementForLayer</a> <a href='../../class/CUI/DOMElement.html#unregisterDOMElement-dynamic'>#unregisterDOMElement</a> <a href='../../class/CUI/DOMElement.html#__assertDOMElement-dynamic'>#__assertDOMElement</a> <a href='../../class/CUI/DOMElement.html#__assertTemplateElement-dynamic'>#__assertTemplateElement</a> <a href='../../class/CUI/DOMElement.html#addClass-dynamic'>#addClass</a> <a href='../../class/CUI/DOMElement.html#setAria-dynamic'>#setAria</a> <a href='../../class/CUI/DOMElement.html#removeClass-dynamic'>#removeClass</a> <a href='../../class/CUI/DOMElement.html#hide-dynamic'>#hide</a> <a href='../../class/CUI/DOMElement.html#show-dynamic'>#show</a> <a href='../../class/CUI/DOMElement.html#hasClass-dynamic'>#hasClass</a> <a href='../../class/CUI/DOMElement.html#isDestroyed-dynamic'>#isDestroyed</a> <a href='../../class/CUI/DOMElement.html#prepend-dynamic'>#prepend</a> <a href='../../class/CUI/DOMElement.html#text-dynamic'>#text</a> <a href='../../class/CUI/DOMElement.html#get-dynamic'>#get</a> <a href='../../class/CUI/DOMElement.html#getFlexHandle-dynamic'>#getFlexHandle</a> <a href='../../class/CUI/Element.html#getElementClass-dynamic'>#getElementClass</a> <a href='../../class/CUI/Element.html#getUniqueId-dynamic'>#getUniqueId</a> <a href='../../class/CUI/Element.html#getOpts-dynamic'>#getOpts</a> <a href='../../class/CUI/Element.html#getOpt-dynamic'>#getOpt</a> <a href='../../class/CUI/Element.html#hasOpt-dynamic'>#hasOpt</a> <a href='../../class/CUI/Element.html#getSetOpt-dynamic'>#getSetOpt</a> <a href='../../class/CUI/Element.html#hasSetOpt-dynamic'>#hasSetOpt</a> <a href='../../class/CUI/Element.html#copy-dynamic'>#copy</a> <a href='../../class/CUI/Element.html#mergeOpt-dynamic'>#mergeOpt</a> <a href='../../class/CUI/Element.html#removeOpt-dynamic'>#removeOpt</a> <a href='../../class/CUI/Element.html#addOpt-dynamic'>#addOpt</a> <a href='../../class/CUI/Element.html#addOpts-dynamic'>#addOpts</a> <a href='../../class/CUI/Element.html#mergeOpts-dynamic'>#mergeOpts</a> <a href='../../class/CUI/Element.html#__getCheckMap-dynamic'>#__getCheckMap</a> <a href='../../class/CUI/Element.html#readOptsFromAttr-dynamic'>#readOptsFromAttr</a> <a href='../../class/CUI/Element.html#proxy-dynamic'>#proxy</a> <a href='../../class/CUI/Element.html#getOptKeys-static'>.getOptKeys</a> </p> </h2> <h2>Constructor Details</h2> <div class='methods'> <div class='method_details'> <p class='signature' id='constructor-dynamic'> # (void) <b>constructor</b><span>(opts = {})</span> <br> </p> </div> </div> <h2>Instance Method Details</h2> <div class='methods'> <div class='method_details'> <p class='signature' id='initOpts-dynamic'> # (void) <b>initOpts</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='readOpts-dynamic'> # (void) <b>readOpts</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='getRowMoveTool-dynamic'> # (void) <b>getRowMoveTool</b><span>(opts = {})</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='initListView-dynamic'> # (void) <b>initListView</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='isSelectable-dynamic'> # (void) <b>isSelectable</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='isNoHierarchy-dynamic'> # (void) <b>isNoHierarchy</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='triggerNodeDeselect-dynamic'> # (void) <b>triggerNodeDeselect</b><span>(ev, node)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='triggerNodeSelect-dynamic'> # (void) <b>triggerNodeSelect</b><span>(ev, node)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='render-dynamic'> # (void) <b>render</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='toggleNode-dynamic'> # (void) <b>toggleNode</b><span>(ev, node)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='__runTrigger-dynamic'> # (void) <b>__runTrigger</b><span>(ev, action, node)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='__actionOnNode-dynamic'> # (void) <b>__actionOnNode</b><span>(ev, action, node)</span> <span class='bound note'>Bound</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='getNodesForMove-dynamic'> # (void) <b>getNodesForMove</b><span>(from_i, to_i, after)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='moveRow-dynamic'> # (void) <b>moveRow</b><span>(from_i, to_i, after)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='getRootChildren-dynamic'> # (void) <b>getRootChildren</b><span>()</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='getSelectedNode-dynamic'> # (void) <b>getSelectedNode</b><span>(key = &quot;selectedNode&quot;)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='prependNode-dynamic'> # (void) <b>prependNode</b><span>(node)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='addNode-dynamic'> # (void) <b>addNode</b><span>(node, append = true)</span> <br> </p> </div> <div class='method_details'> <p class='signature' id='openTreeNodeByRowDisplayIndex-dynamic'> # (void) <b>openTreeNodeByRowDisplayIndex</b><span>(index)</span> <br> </p> </div> </div> </div> <div id='footer'> By <a href='https://github.com/coffeedoc/codo' title='CoffeeScript API documentation generator'> Codo </a> 2.1.2 &#10034; Press H to see the keyboard shortcuts &#10034; <a href='http://twitter.com/netzpirat' target='_parent'>@netzpirat</a> &#10034; <a href='http://twitter.com/_inossidabile' target='_parent'>@_inossidabile</a> </div> <iframe id='search_frame'></iframe> <div id='fuzzySearch'> <input type='text'> <ol></ol> </div> <div id='help'> <p> Quickly fuzzy find classes, mixins, methods, file: </p> <ul> <li> <span>T</span> Open fuzzy finder dialog </li> </ul> <p> Control the navigation frame: </p> <ul> <li> <span>L</span> Toggle list view </li> <li> <span>C</span> Show class list </li> <li> <span>I</span> Show mixin list </li> <li> <span>F</span> Show file list </li> <li> <span>M</span> Show method list </li> <li> <span>E</span> Show extras list </li> </ul> <p> You can focus and blur the search input: </p> <ul> <li> <span>S</span> Focus search input </li> <li> <span>Esc</span> Blur search input </li> </ul> </div> </body> </html>