如何自定义渲染自动完成作为选项组？

Question

我尝试将自动填充渲染为选项组，具体取决于对象type。但它只渲染<div><select>！选项不包括在内！我想显示选项组自动填充功能？

想要渲染样式

<div class="input-field col s12 ui-menu-divider ui-widget-content">
   <select>
     <optgroup label='project'>
          <option value='1'>One</option>
          <option value='2'>Two</option>
     </optgroup>
     <optgroup label='history'>
          <option value='1'>Pending</option>
          <option value='2'>David</option>
     </optgroup>
     <optgroup label='user'>
          <option value='1'>James</option>
     </optgroup>
   </select>
</div>

我目前的代码               

<input type="text">

<script type="text/javascript">
 var source = [
                {id:1,name:"One",type:"project"},
                {id:2,name:"Two",type:"project"},
                {id:1,name:"Crmotion",type:"history"},
                {id:2,name:"David",type:"history"},
                {id:1,name:"Aung Naing",type:"user"}
            ];


$("input").autocomplete({
                    minLength: 1,
                    source: source,
                    id: 'input_search_autocomplete',
                    max: 10,
                    scroll: true,

                    focus: function (event, ui) {
                        alert("s");
                        $("input").val(ui.item.value);
                        return false;
                    },
                    select: function (event, ui) {

                    }

                }).autocomplete("instance")._renderItem = function (ul, item) {
                    var option = $("<select>");
                    for(var data in item) {
                        var _option_html = $('<optgroup label="'+item[data].type+"'>");
                        _option_html.append('<option value="'+item[data].id+'">'+item[data].name+'</option>').appendTo(option);
                    }
                    return $('<div class="input-field col s12">')
                            .append(option)
                            .appendTo(ul);
                };
</script>
</body>