Код ниже - это директива для селектора, что действительно круто. Когда вы вводите ключевое слово, он ищет ключевое слово в списке и показывает его. С этим есть проблемы. Когда вы используете tabindex и пытаетесь изменить go с обычного input на этот directive, то, как вы видите на картинке, он находится на поверхности поля ввода. Я хочу, чтобы пользователи перемещались и вводили данные без использования мыши. Я хочу поместить курсор внутри директивы, чтобы пользователь мог вводить данные, когда вы переходите из предыдущего поля ввода. Как этого добиться?
View
{{addOrderConfiguration.pickupAddressTooltip}} {{result.name}} {{result.address}} Нет результатов
директива селектора
.directive("selector",
[
"$timeout", function ($timeout) {
return {
restrict: "A",
transclude: true,
scope: {
options: "=selector",
model: "=model",
index: "@",
},
link: function ($scope, $element, $attr) {
// Defaults
if ($scope.options.debounce === undefined)
$scope.options.debounce = 200;
$scope.index = $attr.index;
$scope.parentIndex = $attr.parentindex;
var showDropdown = function () {
$element.find(".dropdown").addClass("open");
}
var hideDropdown = function () {
$element.find(".dropdown").removeClass("open");
$scope.api.focusIndex = null;
}
var listFocusUp = function () {
if ($scope.api.searchResults != null && $scope.api.searchResults.length > 0) {
if ($scope.api.focusIndex == null) {
$scope.api.focusIndex = 0;
} else if ($scope.api.focusIndex > 0) {
$scope.api.focusIndex--;
}
}
}
var listFocusDown = function () {
if ($scope.api.searchResults != null && $scope.api.searchResults.length > 0) {
if ($scope.api.focusIndex == null) {
$scope.api.focusIndex = 0;
} else if ($scope.api.focusIndex < $scope.api.searchResults.length - 1) {
$scope.api.focusIndex++;
} else {
$scope.api.focusIndex = $scope.api.searchResults.length - 1;
}
}
}
var selectFocusedItem = function () {
if ($scope.api.searchResults != null && $scope.api.focusIndex != null) {
$scope.api.select($scope.api.searchResults[$scope.api.focusIndex]);
api.searchText = null;
return;
}
if (typeof $scope.options.useEnteredText == "function") {
$scope.options.useEnteredText(api.searchText, $scope.index, $scope.parentIndex);
api.searchText = null;
}
}
$scope.$on('reset',
function (ev, data) {
$scope.api.searchText = null;
});
var api = {
search: function () {
if (api.searchTimeout != null) {
clearTimeout(api.searchTimeout);
api.searchTimeout = null;
}
api.searchTimeout = setTimeout(function () {
api.searching = true;
api.searchTimeout = null;
$scope.api.focusIndex = null;
showDropdown();
$scope.options.search(api.searchText).then(function (searchResults) {
api.searchResults = searchResults;
api.searching = false;
});
},
$scope.options.debounce);
},
searching: false,
searchText: null,
searchTimeout: null,
searchResults: null,
select: function (item, index, parentIndex) {
$scope.model = item;
$scope.model.index = $scope.index;
$scope.model.parentIndex = $scope.parentIndex;
if (typeof $scope.options.selected == "function")
$scope.options.selected(item, api.searchText);
api.searchText = null;
hideDropdown();
},
deselect: function () {
if (typeof $scope.options.deselected == "function")
$scope.options.deselected($scope.model, $scope.index);
$scope.model = null;
//api.focus();
api.searchText = null;
hideDropdown();
},
//focus: function () {
// $timeout(function () {
// $element.find("#searchbox").focus();
// });
//},
focusIndex: null
}
$scope.api = api;
$scope.searchTextKeydown = function (event) {
var keyCode = event.which || event.keyCode;
if (keyCode === 38) {
event.preventDefault();
event.stopPropagation();
listFocusUp();
return false;
} else if (keyCode === 40) {
event.preventDefault();
event.stopPropagation();
listFocusDown();
return false;
} else if (keyCode === 9) { // 13 for 'ENTER' and 9 for 'TAB' key
event.preventDefault();
event.stopPropagation();
selectFocusedItem();
//api.focus();
//api.searchText = null;
return false;
}
}
$scope.searchClicked = function () {
api.search();
}
$scope.removeClicked = function () {
api.deselect();
}
$scope.searchTextChanged = function (index) {
api.search();
if (typeof $scope.options.searchTextChanged == "function")
$scope.options.searchTextChanged(api.searchText, index);
}
$scope.isSmall = $attr.inputSm != null;
$scope.disabled = function () {
if (typeof $scope.options.disabled == "function")
return $scope.options.disabled();
else if ($scope.options.disabled != null)
return $scope.options.disabled;
else
return false;
}
$scope.required = function () {
if (typeof $scope.options.required == "function")
return $scope.options.required();
else if ($scope.options.required != null)
return $scope.options.required;
else
return false;
};
$scope.focusLost = function () {
if (typeof $scope.options.focusLost == "function") {
api.searchText = $scope.options.focusLost(angular.copy(api.searchText),
$scope.index,
$scope.parentIndex);
hideDropdown();
return false;
}
return false;
};
if ($attr.name != null && $attr.name.length > 0) {
$scope.$parent[$attr.name] = api;
if ($attr.required != null) {
var formController = $element
.parent()
.controller("form");
if (formController != null) {
$scope.required = true;
$scope.$watch("model",
function () {
formController.$setValidity($attr.name, $scope.model != null);
});
$scope.$on("$destroy",
function () {
formController.$setValidity($attr.name, true);
delete formController.$error[$attr.name];
});
}
}
}
//if ($attr.autoFocus != null) {
// api.focus();
//}
},
template: " <div ng-if=\"model == null\" class=\"input-group dropdown\">" +
" <input type=\"text\" name=\"{{options.name}}\" class=\"form-control input-sm text-capitalize\" ng-class=\"{'input-sm':isSmall}\" ng-disabled=\"disabled()\" ng-change=\"searchTextChanged({{index}})\" ng-model=\"api.searchText\" placeholder=\"{{options.placeholder}}\" ng-keydown=\"searchTextKeydown($event)\" ng-required=\"required()\" />" +
" <div class=\"dropdown-menu selector-dropdown-menu\" style=\"padding: 0px; min-width:150%;\" ng-show=\"!disabled()\" style=\"width:100%\" ng-click=\"$event.stopPropagation()\">" +
" <div ng-show=\"api.searching\" style=\"padding: 5px;\"><img src=\"/Content/Images/loading-bars.svg\" width=\"32\" height=\"32\" /> Loading</div>" +
" <div ng-show=\"!api.searching\" ng-transclude></div>" +
" </div>" +
" <span class=\"input-group-btn\" data-toggle=\"dropdown\" ng-keydown=\"searchTextKeydown($event)\">" +
" <button type=\"button\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-sm':isSmall}\" ng-click=\"searchClicked()\" ng-disabled=\"disabled()\">" +
" <span class=\"glyphicon glyphicon-search\"></span>" +
" </button>" +
" </span>" +
"</div>" +
"<div ng-if=\"model != null\" class=\"input-group\">" +
" <input type=\"text\" focus-next=\"idManage\" focus-on-tab=\"0\" class=\"form-control input-sm text-capitalize highlightRequired\" readonly ng-class=\"{'input-sm':isSmall}\" value=\"{{options.display(model)}}\" />" +
" <span class=\"input-group-btn\">" +
" <button type=\"button\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-sm':isSmall}\" ng-click=\"removeClicked()\" ng-disabled=\"disabled()\" >" +
" <span class=\"glyphicon glyphicon-remove\"></span>" +
" </button>" +
" </span>" +
"</div>"
}
}
])