Print Page - textbox or searbox in menu as menu item

Title: textbox or searbox in menu as menu item
Post by: sky-t on December 23, 2020, 01:35:30 PM

Hi there,

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

Thanks a lot!

Title: Re: textbox or searbox in menu as menu item
Post by: jarry on December 24, 2020, 07:51:53 AM

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>

Title: Re: textbox or searbox in menu as menu item
Post by: sky-t on December 25, 2020, 01:57:35 AM

WOW jarry!!!!

This is awesome!

Works like a charme!!!!

Happy christmas to you!

Title: Re: textbox or searbox in menu as menu item
Post by: sky-t on December 26, 2020, 11:42:41 AM

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?

Title: Re: textbox or searbox in menu as menu item
Post by: jarry on December 27, 2020, 02:55:15 AM

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">
...

Title: Re: textbox or searbox in menu as menu item
Post by: sky-t on December 28, 2020, 12:25:20 AM

Thank you very much - jarry

That works!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sky-t on December 23, 2020, 01:35:30 PM