Поле ввода HTML Angular6 с изменяемыми параметрами раскрывающегося списка
Я хочу реализовать поле ввода HTML5, которое поддерживает пользователя с его вводом.
Представьте себе случай, когда пользователь должен ввести не просто случайный текст, он должен следовать определенной грамматике:
rule: <expression> {<op><expression>}
expression: <Object>[<property>] is <State>
property: key=value
State: active | inactive | valid .....
Я думал о конечном автомате, например, если пользователь вводит это, то пользователь находится в состоянии 2, а если нет, он находится в состоянии 3 и так далее.
Я обнаружил следующее:
<input list = "browsers">
<datalist id = "browsers">
<option value = "Internet Explorer">
<option value = "Firefox">
<option value = "Chrome">
<option value = "Opera">
<option value = "Safari">
</datalist>
И это почти то, что мне нужно. Но, как видите, он слишком статичен. Я хочу обновить параметры, и они должны появиться в любое время, а не только при первом выборе.
Поэтому, если пользователь запускает новое выражение, параметры меняются, а затем они снова меняются после того, как он сделал какой-то ввод. Параметры должны быть интерактивными, а значение параметров должно быть добавлено к предыдущему тексту.
Я подумал о решении, в котором я добавляю только тег под полем ввода, где я изменяю innerHtml, но это не кажется хорошим решением, что может быть лучше?
Не могли бы вы уточнить, что именно вы пытаетесь сделать? Что вы имеете в виду под предыдущим текстом?
Предыдущий текст: Сервер [secure = true] активен и -> теперь вот раскрывающийся список с опциями, где пользователь может выбрать один Новый текст: Сервер [secure = true] активен и Соединение [двунаправленное = true] Соединение [двунаправленное = true] был выбранным вариантом
Ответы 1
Решил сам с помощью кода ниже:
component.ts:
export class Component {
ruleInputFocused:boolean = false;
selectActive: boolean=false;
options: string[];
constructor() {
this.setState(0);
}
ngOnInit() {
}
changeSelective(value:boolean){
this.selectActive= value;
}
changeFocused(value:boolean){
if (this.selectActive == false){
this.ruleInputFocused = value;
}
}
setState(stateNumber: number){
this.options = [];
this.positionCounter = -1;
if (stateNumber == 0){
this.options.push("(");
this.options.push("Object[key=value] ");
}
}
optionClicked(i){
this.ruleText = this.ruleText.concat(this.options[i]);
document.getElementById("ruleInput").focus();
}
positionCounter = -1;
@HostListener('document:keydown', ['$event'])
public handleKeyboardEvent(event: KeyboardEvent): void {
if (this.ruleInputFocused){
if (event.key == 'ArrowDown'){
this.positionCounter++;
if (this.positionCounter>this.options.length -1){
this.positionCounter = 0;
}
console.info(this.positionCounter);
}else if (event.key == 'ArrowUp'){
this.positionCounter--;
if (this.positionCounter<0){
this.positionCounter = this.options.length -1
}
}else if (event.key == 'Enter'){
if (this.positionCounter != -1){
this.optionClicked(this.positionCounter);
}
}
}
}
}
HTML:
<div class = "mainContainer">
<div class = "ruleInputDiv">
<div class = "divLabel">Rule: </div>
<input id = "ruleInput" type = "text" autocorrect = "off"
(focus) = "changeFocused(true)" (focusout) = "changeFocused(false)" [(ngModel)] = "ruleText" >
<button id = "ruleInputCheckButton" (click) = "checkRule()">Check</button>
</div>
<!--[hidden]=!ruleInputFocused-->
<div class = "optionsDiv" id = "optionsDiv" [hidden] = "!ruleInputFocused">
<div class = "singleOption" *ngFor = "let option of options; let i = index"
[ngClass] = "{selected: positionCounter===i}" (click) = "optionClicked(i)" (mouseenter) = "changeSelective(true)" (mouseleave) = "changeSelective(false)">
{{option}}
<div class = "verticalBorderDiv"></div>
</div>
</div>
</div>
CSS:
Или раскрывающийся список не должен отображаться в любое время. Он должен отображаться, когда фокус находится в поле ввода.