Default behaviour limits the ClientPeoplePicker to return only users from SharePoint, the ClientPeoplePicker does not return SPGroups or Active Directory Groups or Security Groups nor Distribution Groups.You can configure client side people picker to get groups as below.
Follow below steps
1.Add references
<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<script type="text/javascript" src="../SiteAssets/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/sp.runtime.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/sp.js"></script>
2.Initialize peoplepicker
$(document).ready(function(){
SetPeoplePicker_Multiselect("peoplePickerspanId",true);
});
function SetPeoplePicker_Multiselect(peoplePickerElementId, allowMultiple){
if (allowMultiple == null) {
allowMultiple = true;
}
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = allowMultiple;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '';
SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}
3.Add Markup to page
<span id="peoplePickerspanId"> </span>
you can tweak it more as per your requirements.