textbox or searbox in menu as menu item

[sky-t]

Hi there,

is there a chance to have a textbox or searchbox in a menu?

Thanks a lot!

[jarry]

Please refer to this code.

Code:

<div id="mm" class="easyui-menu menu-content" data-options="onShow:function(){$('#sm').menu('show')}" style="width:100px;height:200px;padding:0">
	<div><input class="easyui-textbox" prompt="Input..." style="width:100%"></div>
	<div id="sm" class="easyui-menu" data-options="inline:true" style="width:144px">
		<div>Menu Item1</div>
		<div>Menu Item2</div>
		<div>Menu Item3</div>
		<div>Menu Item4</div>
		<div>Menu Item5</div>
	</div>
</div>

[sky-t]

WOW jarry!!!!

This is awesome!

Works like a charme!!!!


Happy christmas to you!

[sky-t]

hi jarry,

i'm sorry but there is an issue if there is a sub menu in the menu with the input like that:

Code:

<div id="menuMain" class="easyui-menu menu-content" data-options="onShow:function(){showMainMenu();}" style="height:90px; padding: 0">
    <div id="menuSubMain" class="easyui-menu" data-options="inline: true, border: false" style="width: 100%;">
        <div iconCls="icon-administration">
            <span id="mainMenuItemAdministration"></span>
            <div>
                <div onclick="addWindow({module:'contacts', action:'admin'})" iconCls="icon-contacts"><span id="mainMenuItemAdministrationContacts"></span></div>
                <div class="menu-sep"></div>
                <div iconCls="icon-orders"><span id="mainMenuItemAdministrationOrders"></span></div>
                <div class="menu-sep"></div>
                <div onclick="addWindow({module:'timerecording', action:'admin'})" iconCls="icon-workinghours"><span id="mainMenuItemAdministrationTimerecording"></span></div>
            </div>
        </div>
    </div>
    <div style="margin-left: 30px; margin-right: 5px; margin-top: 10px;"><input id="inputGlobalSearch" class="easyui-searchbox"></input></div>
</div>

The Submenu disappears when moving the mouse to the submenu and on mobile devices the hole menu disappears when klicking in the searchbox and the keyboard appears.

Any ideas for that?

[jarry]

Please set the 'hideOnUnhover' property value to false for the top menu to keep it visible while mouseleave it.

Code:

<div id="menuMain" class="easyui-menu menu-content" data-options="hideOnUnhover:false,onShow:function(){showMainMenu();}" style="height:90px; padding: 0">
...

[sky-t]

Thank you very much - jarry

That works!