So verbergen Sie das Textfeld schwimmende Vorschläge, wenn das Feld bleibt, aber nicht, wenn ein Vorschlag angeklickt wi ⇐ JavaScript

[Anonymous]

Ich habe eine Vue -Komponente (mein erstes!) Erstellt, das Vorschläge für Optionen zeigen soll, wenn Sie eingeben: < /p>

Code: Select all

const AutoCompleteComponent = {
data()  {
return {
open: false,
current: 0,
/** @type {string[]} **/
suggestions: ["first", "ble", "hello"],
fieldWidth: 0,
}
},
mounted() {
this.fieldWidth = this.$refs.inputField.clientWidth;
},
methods: {

focus() {
console.log("Focus activated");
this.open = true;
},

blur() {
console.log("Focus deactivated")
// when I do this, the suggestions dissappear the frame before they are
// clicked, causing the suggestionClick to not be called
this.open = false;
},

//For highlighting element
isActive(index) {
return index === this.current;
},

//When the user changes input
change() {
this.loadSuggestions();
//console.log("change()");
if (this.open == false) {
this.open = true;
this.current = 0;
}
},

//When one of the suggestion is clicked
suggestionClick(index) {
this.currentText = this.matches[index];
console.log("Clicked suggestion: ", index, this.matches[index]);
this.open = false;
},
},
computed: {

/**
* Filtering the suggestion based on the input
* @this {ReturnType}
*/
matches() {
console.log("computed.matches() str=", this.currentText, " suggestions=", this.suggestions);
return this.suggestions.filter((str) => {
const withoutAccents = str.toLowerCase();
return withoutAccents.indexOf(this.currentText.toLowerCase()) >= 0;
});
},

//The flag
openSuggestion() {
return this.currentText !== "" &&
this.matches.length != 0 &&
this.open === true;
},

copiedWidth() {
return this.fieldWidth + "px";
}
},
template: "#vue-auto-complete-template"
};
< /code>
Das ist es ist eine HTML -Vorlage: < /p>
    




[list]
[*]              @click="suggestionClick(suggestion_index)">
{{ suggestion }}

[/list]



< /code>
Dann erstelle ich es so: < /p>


< /code>
Um es unter dem Feld angezeigt zu werden, wird das folgende CSS angewendet: < /p>
.auto-complete-field {
display:inline-block;
}
.auto-complete-field .suggestions-wrapper {
display:block;
position: relative;
}

.auto-complete-field.open ul {
display:initial;
}

.auto-complete-field ul {
list-style:none;
padding:0;
margin:0;

display: none;

position: absolute;
top:0px;
left: 0px;

border-bottom: 1px solid black;
}
.auto-complete-field ul li {
background-color: white;
border: 1px solid black;
border-bottom: none;
}

Jetzt ist das Problem, wenn Sie auf die Funktion bLUr () schauen, wird die geöffnete auf False festgelegt, was wiederum die Vorschläge ul.field-konstions < /Code> Verwenden des aktiven Klasse-Name. field.open ul Bevor das Klickereignis erstellt wird, wird es stattdessen auf dem aufgerufen, was darunter war. this.open = false}, 100) . Ich denke, dass dies funktioniert, dass die Auszeit zumindest zwei Render -Rahmen sein muss. Es funktionierte weder als Mikrotask noch als RequestAnimationFrame . Ich möchte keine Zeitüberschreitung verwenden, insbesondere einen großen, da es zu einem flackernden GUI mit schnellen Klicks flackert. < /P>
Ich suche eine solide Lösung dafür. Ich würde hoffen, dass Vue etwas dafür hat. Eine einfache JS -Lösung hierfür ist in der Regel das Neuauflagen des Blur -Ereignisses durch Anhören mehrerer Ereignisse im Fenster und überprüft, wo sie aufgetreten sind. Ich würde das lieber vermeiden.