<div class="search-panel"> <form class="vn-pa-lg" ng-submit="$ctrl.onSearch()"> <vn-horizontal> <vn-textfield vn-focus vn-one label="General search" ng-model="filter.search" vn-focus> </vn-textfield> </vn-horizontal> <vn-horizontal> <vn-textfield vn-one label="Item id" ng-model="filter.itemId"> </vn-textfield> <vn-autocomplete vn-one ng-model="filter.buyerId" url="TicketRequests/getItemTypeWorker" search-function="{firstName: $search}" show-field="nickname" value-field="id" label="Buyer"> </vn-autocomplete> </vn-horizontal> <vn-horizontal> <vn-autocomplete vn-one ng-model="filter.typeId" url="ItemTypes" show-field="name" value-field="id" label="Type" fields="['categoryFk']" include="'category'"> <tpl-item> <div>{{name}}</div> <div class="text-caption text-secondary"> {{category.name}} </div> </tpl-item> </vn-autocomplete> <vn-autocomplete vn-one url="ItemCategories" label="Category" show-field="name" value-field="id" ng-model="filter.categoryId"> </vn-autocomplete> </vn-horizontal> <vn-horizontal> <vn-date-picker vn-one label="From" ng-model="filter.from"> </vn-date-picker> <vn-date-picker vn-one label="To" ng-model="filter.to"> </vn-date-picker> </vn-horizontal> <vn-horizontal class="vn-mt-lg"> <vn-submit label="Search"></vn-submit> </vn-horizontal> </form> </div>