时间戳

首页 > 解决方案 > 什么都没有输入时 Ace 自动完成

javascript - 什么都没有输入时 Ace 自动完成

问题描述

我正在使用 Ace Editor 编辑 JSON。我的 json 对象中的每个键都有一个相应的可能值列表。当用户编辑 JSON 值时，我想通过自动完成显示相应的值列表。

这主要在下面的代码段中起作用。唯一的问题是您必须至少输入一个字符才能触发自动完成功能。如果您只是完全删除该值，则不会触发自动完成。即使在删除一个值之后，有没有办法让自动完成触发？

<style>
  #editor {
    width: 500px;
    height: 500px;
  }
</style>

<div id="editor">{
  "color": "red",
  "animal": "elephant"
}</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script>
  var langTools = ace.require("ace/ext/language_tools");

  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/json");
  editor.setOptions({
    enableLiveAutocompletion: true,
  });

  langTools.setCompleters([{
    getCompletions: function(editor, session, pos_obj, prefix, callback) {
      console.log('getCompletions')
      const content = editor.session.getValue()
      const lines = content.split('\n')
      const line = lines[pos_obj.row]
      if(line.match(/\bcolor\b/))
        callback(null, [
          {name: "red", value: "red", score: 1000, meta: "color"},
          {name: "green", value: "green", score: 1000, meta: "color"},
          {name: "blue", value: "blue", score: 1000, meta: "color"}
        ])
      else if(line.match(/\banimal\b/))
        callback(null, [
          {name: "hamster", value: "hamster", score: 1000, meta: "template"},
          {name: "elephant", value: "elephant", score: 1000, meta: "template"}
        ])
      else
        callback(null, [])
    }
  }]);

</script>

http://plnkr.co/edit/mozSmuzhbEE84LOROKJC?p=preview

标签： javascriptace-editor

解决方案

为了始终使用自动完成而不是等待用户键入下一个字符来调用自动完成列表，您可以在初始化期间使用以下代码段，

editor.commands.on("afterExec", function (e) {
    if (e.command.name == "insertstring" && /^[\w.]$/.test(e.args)) {
        editor.execCommand("startAutocomplete");
    }
});

推荐阅读