Автозаполнение Ace, когда ничего не набиралось

Я редактирую JSON с помощью Ace Editor. Каждый ключ в моем объекте 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.info('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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
184
1

Ответы 1

Чтобы всегда использовать автозаполнение вместо ожидания, пока пользователь наберет следующие символы для вызова списка автозаполнения, вы можете использовать приведенный ниже фрагмент кода во время инициализации,

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

Другие вопросы по теме