Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mmenu searchfield: search form and position

Tags:

jquery

mmenu

I'm using the mmenu jquery plugin for my website. Now I have noticed that the searchfield in the newest version can be configured as a search form.

1.How do I realize that?

My normal search form looks like that:

<form action="search.html" method="post">
    <input type="text" name="item" id="searchform" placeholder="Search" />
    <button type="submit" name="submit" id="searchbutton">Search</button>
    <input type="hidden" name="do" value="search" />
    <input type="hidden" name="searchin" value="all" />
    <input type="hidden" name="send" value="1" />
</form>

I've tried this one but it does not work:

$("#menu").mmenu({
    navbars: { content: [ "prev", "searchfield", "close" ] },
    searchfield: {
        search: false,
    form: {
        action: "search.html",
        method: "post" },
    input: {
        type: "text",
        name: "item",
        id: "searchform" },
    input: {
        type: "hidden",
        name: "do",
        value: "search" },
    input: {
        type: "hidden",
        name: "searchin",
        value: "all" },
    input: {
        type: "hidden",
        name: "send",
        value: "1" }
    }
});

2.Is it possible to move the search field down to the end of the menu?

Thanks!

like image 474
Marc Avatar asked Oct 30 '22 03:10

Marc


1 Answers

I know this is an old thread, but in case someone's also looking for an answer

  1. In order to use custom form in searchfield, you need to add configuration, not options. So, the correct format is:

    $("#menu").mmenu({
        navbars: { content: [ "prev", "searchfield", "close" ] },
        searchfield: {
            search: false
        }
    },{
        "searchfield": {
            form: {
                action: "search.html",
                method: "post" 
            },
            input: {
                type: "text",
                name: "item",
                id: "searchform" 
            }
        }
    });
    
  2. You can change the navbars position:

    "navbars": [ { "position": "bottom", "content": [ "searchfield" ] } ]

like image 177
Astarthe Avatar answered Nov 15 '22 07:11

Astarthe