{"action":"created","issue":{"url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/323","repository_url":"https://api.github.com/repos/running-coder/jquery-typeahead","labels_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/323/labels{/name}","comments_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/323/comments","events_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/323/events","html_url":"https://github.com/running-coder/jquery-typeahead/issues/323","id":216544314,"number":323,"title":"Static item at bottom of menu","user":{"login":"khalidadil","id":2343076,"avatar_url":"https://avatars1.githubusercontent.com/u/2343076?v=3","gravatar_id":"","url":"https://api.github.com/users/khalidadil","html_url":"https://github.com/khalidadil","followers_url":"https://api.github.com/users/khalidadil/followers","following_url":"https://api.github.com/users/khalidadil/following{/other_user}","gists_url":"https://api.github.com/users/khalidadil/gists{/gist_id}","starred_url":"https://api.github.com/users/khalidadil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/khalidadil/subscriptions","organizations_url":"https://api.github.com/users/khalidadil/orgs","repos_url":"https://api.github.com/users/khalidadil/repos","events_url":"https://api.github.com/users/khalidadil/events{/privacy}","received_events_url":"https://api.github.com/users/khalidadil/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-03-23T19:23:38Z","updated_at":"2017-03-23T20:29:30Z","closed_at":null,"body":"I'm trying to create a menu similar to this in the material style:\r\n<img src=\"https://cloud.githubusercontent.com/assets/2343076/24264385/420fdba2-0fce-11e7-8ef8-b7d912cb1398.png\" width=\"150\">\r\n\r\nI'm using [MaterializeCSS](http://materializecss.com/dropdown.html), for which the dropdown code looks like:\r\n```\r\n<ul id='dropdown1' class='dropdown-content'>\r\n    <li><a href=\"#!\">one</a></li>\r\n    <li><a href=\"#!\">two</a></li>\r\n    <li class=\"divider\"></li>\r\n    <li><a href=\"#!\">three</a></li>\r\n</ul>\r\n```\r\n\r\nFor my menu, I'd like the dynamic results to be provided by typeahead, but a static item always present at the bottom of the menu for \"Add Item\" with an \"add-item\" class to attach a jQuery listener.\r\n\r\nIs there a way built into typeahead to do this, or would I be better off just using jQuery?\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/comments/288850174","html_url":"https://github.com/running-coder/jquery-typeahead/issues/323#issuecomment-288850174","issue_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/323","id":288850174,"user":{"login":"running-coder","id":7377382,"avatar_url":"https://avatars0.githubusercontent.com/u/7377382?v=3","gravatar_id":"","url":"https://api.github.com/users/running-coder","html_url":"https://github.com/running-coder","followers_url":"https://api.github.com/users/running-coder/followers","following_url":"https://api.github.com/users/running-coder/following{/other_user}","gists_url":"https://api.github.com/users/running-coder/gists{/gist_id}","starred_url":"https://api.github.com/users/running-coder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/running-coder/subscriptions","organizations_url":"https://api.github.com/users/running-coder/orgs","repos_url":"https://api.github.com/users/running-coder/repos","events_url":"https://api.github.com/users/running-coder/events{/privacy}","received_events_url":"https://api.github.com/users/running-coder/received_events","type":"User","site_admin":false},"created_at":"2017-03-23T20:29:30Z","updated_at":"2017-03-23T20:29:30Z","body":"so you would have an input (which acts as a Typeahead) and a menu beside (your screenshot) that gets constructed depending on the search results?\r\n\r\n```javascript\r\nvar newItemHtml = '<a href=\"javascript:;\" class=\"new-item\" onclick=\"newItem()\">New Item</a>';\r\n\r\n$.typeahead({\r\n    input: \".js-typeahead\",\r\n    minLength: 0,\r\n    order: \"asc\",\r\n    searchOnFocus: true,\r\n    source: {\r\n        group: {\r\n            data: ['one', 'two', 'tree']\r\n        }\r\n    },\r\n    emptyTemplate: newItemHtml,\r\n    callback: {\r\n        onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {\r\n            var divider = '<li class=\"divider\"></li>';\r\n            var itemHtml = '<li>' + newItemHtml + '</li>';\r\n\r\n            if (resultHtmlList && result.length) {\r\n                resultHtmlList.append(divider + itemHtml)\r\n            }\r\n        }\r\n    },\r\n    debug: true\r\n});\r\n\r\nfunction newItem() {\r\n    alert('New item!')\r\n}\r\n```"}}
{"actor":{"display_login":"running-coder"}}