Javascript 在文本区域中像在IDE中一样反应自动完成（例如VS代码、Atom）

我尝试编写一个自动完成功能，如React中的gif。 因此，在编写文本时会出现建议

然而，到目前为止，我能找到的所有软件包都能工作

a） 仅在输入/文本区域的开头（例如）

b） 或者需要一个触发器字符（如@或#）来打开（例如）

我会错过一些机会吗？有什么提示/套餐吗

---

您可以尝试一下

实际上，我在需要textarea实现方面遇到了相同的问题，但我可以帮助实现自动完成触发行为

我们有一个模板变量的实现，它看起来像

{{person.name}}

，可以解析为实际值

关于仅在第一个单词上触发的自动补全，您可以通过对所需函数进行一些修改来解决这个问题

例如，我所需的函数如下所示。（不是一个完全可行的例子，但所有重要的部分）

const templateVars=Object.values（TemplateVarMap）；
常量变量=templateVars.map（（templateVar）=>{
返回{
名称：templateVar，
};
});
//此功能、onChange和onSuggestionSelected/Highlight是重要的
//零件。我们基本上获取完整的输入字符串，然后切片到
//自动完成标记，并对搜索执行相同的操作，以便它在键入时进行过滤
const getSuggestions=（值）=>{
常量索引=值
.trim（）
.toLowerCase（）
.lastIndexOf（“{”）；//激活自动完成标记
常量inputValue=值
.trim（）
.toLowerCase（）
.slice（sliceIndex+2）；//+2跳过{{
常量inputLength=inputValue.length；
//键入“{{”后显示每个模板变量选项，然后按
//他们继续打字
返回inputLength==0
？变量
：variables.filter(
（variable）=>variable.name.toLowerCase（）.slice（0，inputValue.length）==inputValue
);
};
const getSuggestionValue=（suggestion）=>suggestion.name；
const renderSuggestion=（suggestion）=>{suggestion.name}；
OnSuggestionFetchRequested=（{value}）=>{
这是我的国家({
建议：获取建议（值），
});
};
OnSuggestionClearRequested=（）=>{
这是我的国家({
建议：[]，
});
};
onChange=（事件，{newValue}）=>{
//onChange在突出显示/选择时激发，并尝试擦除
//建议变量的整个输入，因此如果
//是一个模板变量，不要删除它
if（templateVars.includes（newValue））{
返回；
}
这是我的国家({
value:newValue，
});
};
//它们都需要做类似的事情，因为其中一个是单击选择
//另一个是选择使用箭头键+回车键，我们基本上是
//手动检查输入，仅将变量放入
//字符串，而不是直接替换它。
onSuggestionHighlighted=（{suggestion}）=>{
如果（！建议）{
返回；
}
const{value}=this.state；
const sliceIndex=value.lastIndexOf（'{{'）+2；
const currentVal=value.slice（0，sliceIndex）；
const newValue=currentVal.concat（suggestion.name）+'}}'；
this.setState（{value:newValue}）；
};
onSuggestionSelected=（事件，{suggestionValue}）=>{
const{value}=this.state；
const sliceIndex=value.lastIndexOf（'{{'）+2；
const currentVal=value.slice（0，sliceIndex）；
const newValue=currentVal.concat（suggestionValue）+'}}'；
this.setState（{value:newValue}）；
};
常量输入属性={
value:this.state.value，
onChange:this.onChange，
};
render（）{
返回(
)
}

这让我可以键入类似于

的内容，这是一些带有{{

的文本，并弹出自动完成弹出窗口，在选择一个选项时，它应该转到

这是一些带有{{person.name}

的文本

这里唯一的问题是，它要求输入中的最后两个字符是

{{

（或任何您的标记），以便自动完成框出现。我仍然在玩光标移动，并以不同的方式切割字符串，因此如果我编辑的模板不在末尾，框仍然会弹出

---

希望这能有所帮助。

我们最终使用了神奇的编辑器

---

可以很容易地更改，以使建议由任何字符触发（而不仅仅是“@”）。好了：完美的自动建议。

，这仍处于开发阶段，但可能是您正在寻找的。是否有幸为您的问题找到解决方案？我也在尝试实现类似的功能。不。不幸的是，不是雪人担心这是一个“经典”自动补全组件就像很多组件一样，自动补全只在第一个单词触发。我尝试了一些东西，但无法理解所有内容并找到一种方法，你能帮我吗？你有代码示例可以分享吗？

    const templateVars = Object.values(TemplateVarMap);

    const variables = templateVars.map((templateVar) => {
        return {
            name: templateVar,
        };
    });

    //This func, onChange, and onSuggestionSelected/Highlight are the important
    //parts. We essentially grab the full input string, then slice down to our 
    //autocomplete token and do the same for the search so it filters as you type
    const getSuggestions = (value) => {
        const sliceIndex = value
            .trim()
            .toLowerCase()
            .lastIndexOf('{{'); //activate autocomplete token
        const inputValue = value
            .trim()
            .toLowerCase()
            .slice(sliceIndex + 2); //+2 to skip over the {{
        const inputLength = inputValue.length;
        //show every template variable option once '{{' is typed, then filter as 
        //they continue to type
        return inputLength === 0
            ? variables
            : variables.filter(
                (variable) => variable.name.toLowerCase().slice(0, inputValue.length) === inputValue
            );
    };

    const getSuggestionValue = (suggestion) => suggestion.name;

    const renderSuggestion = (suggestion) => <div>{suggestion.name}</div>;

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value),
        });
    };

    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: [],
        });
    };


    onChange = (event, { newValue }) => {
        //onChange fires on highlight / selection and tries to wipe
        //the entire input to the suggested variable, so if our value
        //is exactly a template variable, don't wipe it 
        if (templateVars.includes(newValue)) {
            return;
        }
        this.setState({
            value: newValue,
        });
    };

    //These both need to do similar things because one is a click selection
    //and the other is selection using the arrow keys + enter, we are essentially
    //manually going through the input and only putting the variable into the
    //string instead of replacing it outright.
    onSuggestionHighlighted = ({ suggestion }) => {
        if (!suggestion) {
            return;
        }
        const { value } = this.state;
        const sliceIndex = value.lastIndexOf('{{') + 2;
        const currentVal = value.slice(0, sliceIndex);
        const newValue = currentVal.concat(suggestion.name) + '}}';
        this.setState({ value: newValue });
    };

    onSuggestionSelected = (event, { suggestionValue }) => {
        const { value } = this.state;
        const sliceIndex = value.lastIndexOf('{{') + 2;
        const currentVal = value.slice(0, sliceIndex);
        const newValue = currentVal.concat(suggestionValue) + '}}';
        this.setState({ value: newValue });
    };

    const inputProps = {
        value: this.state.value,
        onChange: this.onChange,
    };

    render() {
        return (
            <Autosuggest
                suggestions={this.state.suggestions}
                onSuggestionSelected={this.onSubjectSuggestionSelected}
                onSuggestionHighlighted={this.onSubjectSuggestionHighlighted}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                inputProps={inputProps}
            />
        )
   }