Я пытаюсь заставить группу списков автозаполнения появляться, когда я начинаю набирать слова с помощью клавиатуры.Похоже на это Автозаполнение с элементами группы списков
Здесь я ссылаюсь на Текстовое поле автозаполнения AngularJS
Но потом, когда я пытаюсь выполнить тест для реализацииавтозаполнение в сетке пользовательского интерфейса UI-Grid , шаблон нижнего колонтитула, проблема возникла.И кажется, что группа списков была закрыта / под шаблоном нумерации страниц или шаблоном нижнего колонтитула сетки Это HTML в режиме проверки
Здесь я вижу, что элементы группы списка имеют Я использую метод внешней области видимости для вызова и отображения моего нижнего колонтитула и шаблона разбивки на страницы в $ scope.gridOptions
showGridFooter: true,
gridFooterTemplate: '../component_html/footerTemplate.html',
enablePaginationControls: true,
paginationTemplate: '../component_html/pagination_template.html',
Это код моего нижнего колонтитула сетки template.html, я пытался применить css для настройки z-индекса элемента группы списка, но он не работает
<div>
<div> <input type="text" style="border-block-color: DodgerBlue;width: 100%; text-align: left;"
class="form-control" name="equip" placeholder="+ Enter your equipment name here to insert new equipment"
ng-model="equip" ng-keyup="grid.appScope.complete(equip)" id='equip'>
</input>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in equipmentL" ng-click="grid.appScope.fillTextbox(equipmentL)">{{item}}</li>
</ul>
</div>
</div>
<div class="ui-grid-footer-info ui-grid-grid-footer">
<span>{{'search.totalItems' | t}} {{grid.rows.length}}</span>
<span ng-if="grid.renderContainers.body.visibleRowCache.length !== grid.rows.length" class="ngLabel">
({{"search.showingItems" | t}} {{grid.renderContainers.body.visibleRowCache.length}})
</span>
<span>| Selected Item(s) : {{grid.appScope.gridApi.selection.getSelectedRows().length}}</span>
</div>
Это мой шаблон нумерации страниц
<div
style="padding-top: 30px"
class="ui-grid-pager-panel"
ui-grid-pager
ng-show="grid.options.enablePaginationControls">
<div
role="navigation"
class="ui-grid-pager-container">
<div
class="ui-grid-pager-control">
<button
type="button"
class="ui-grid-pager-first"
ui-grid-one-bind-title="aria.pageToFirst"
ui-grid-one-bind-aria-label="aria.pageToFirst"
ng-click="pageFirstPageClick()"
ng-disabled="cantPageBackward()">
<div
ng-class="grid.isRTL() ? 'last-triangle' : 'first-triangle'">
<div
ng-class="grid.isRTL() ? 'last-bar-rtl' : 'first-bar'">
</div>
</div>
</button>
<button
type="button"
class="ui-grid-pager-previous"
ui-grid-one-bind-title="aria.pageBack"
ui-grid-one-bind-aria-label="aria.pageBack"
ng-click="pagePreviousPageClick()"
ng-disabled="cantPageBackward()">
<div ng-class="grid.isRTL() ? 'last-triangle prev-triangle' : 'first-triangle prev-triangle'"></div>
</button>
<input
type="number"
ui-grid-one-bind-title="aria.pageSelected"
ui-grid-one-bind-aria-label="aria.pageSelected"
class="ui-grid-pager-control-input"
ng-model="grid.options.paginationCurrentPage"
min="1"
max="{{ paginationApi.getTotalPages() }}"
required />
<span
class="ui-grid-pager-max-pages-number"
ng-show="paginationApi.getTotalPages() > 0">
<abbr
ui-grid-one-bind-title="paginationOf">
/
</abbr>
{{ paginationApi.getTotalPages() }}
</span>
<button
type="button"
class="ui-grid-pager-next"
ui-grid-one-bind-title="aria.pageForward"
ui-grid-one-bind-aria-label="aria.pageForward"
ng-click="pageNextPageClick()"
ng-disabled="cantPageForward()">
<div ng-class="grid.isRTL() ? 'first-triangle next-triangle' : 'last-triangle next-triangle'"></div>
</button>
<button
type="button"
class="ui-grid-pager-last"
ui-grid-one-bind-title="aria.pageToLast"
ui-grid-one-bind-aria-label="aria.pageToLast"
ng-click="pageLastPageClick()"
ng-disabled="cantPageToLast()">
<div ng-class="grid.isRTL() ? 'first-triangle' : 'last-triangle'">
<div ng-class="grid.isRTL() ? 'first-bar-rtl' : 'last-bar'">
</div>
</div>
</button>
</div>
<div
class="ui-grid-pager-row-count-picker"
ng-if="grid.options.paginationPageSizes.length > 1 && !grid.options.useCustomPagination">
<select
ui-grid-one-bind-aria-labelledby-grid="'items-per-page-label'"
ng-model="grid.options.paginationPageSize"
ng-options="o as o for o in grid.options.paginationPageSizes"></select>
<span
ui-grid-one-bind-id-grid="'items-per-page-label'"
class="ui-grid-pager-row-count-label">
{{sizesLabel}}
</span>
</div>
<span
ng-if="grid.options.paginationPageSizes.length <= 1"
class="ui-grid-pager-row-count-label">
{{grid.options.paginationPageSize}} {{sizesLabel}}
</span>
</div>
<div
class="ui-grid-pager-count-container">
<div
class="ui-grid-pager-count">
<span
ng-show="grid.options.totalItems > 0">
{{ 1 + paginationApi.getFirstRowIndex() }}
<abbr
ui-grid-one-bind-title="paginationThrough">
-
</abbr>
{{ 1 + paginationApi.getLastRowIndex() }} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
</span>
</div>
</div>
</div>
Так я объявляю свой метод для запуска события автозаполнения
$scope.complete = function (string){
var output=[];
angular.forEach($scope.EquipmentList,function(string){
output.push(string);
});
$scope.equipmentL = output;
console.log($scope.equipmentL);
}
$scope.fillTextbox=function(string){
$scope.equip=string;
$scope.equipmentL=null;
}
Таким образом, в консоли и в консоли браузера не отображаются ошибки, поэтому я считаю, что это проблемы CSS или шаблона, но я не могу найти никакого решения.Любая идея или пример кода, который может помочь мне решить эту проблему.Спасибо за просмотр моего поста