如何让Inquirer search-list控制台显示名称且保留ID获取功能？

核心思路 #

Inquirer原生list组件会自动显示choices中对象的name字段，但返回value字段的值；第三方search-list组件可能因配置或版本问题未默认实现该逻辑，可通过以下两种方式修复：

方法1：确保choices配置正确并使用颜色库（推荐） #

如果任务名称带颜色，建议用chalk库生成带颜色的文本（避免手动写ANSI码导致解析问题），同时保证choices数组结构正确：

const inquirer = require('inquirer');
const chalk = require('chalk');

// 定义带颜色的任务选项
const taskOptions = [
  { name: chalk.red('任务1：用户管理模块'), value: 'task_001' },
  { name: chalk.green('任务2：订单统计功能'), value: 'task_002' },
  { name: chalk.yellow('任务3：日志系统优化'), value: 'task_003' }
];

// 调用search-list prompt
(async () => {
  const { task: selectedTaskValue } = await inquirer.prompt([
    {
      type: 'search-list',
      name: 'task',
      message: '请选择要处理的任务:',
      choices: taskOptions
    }
  ]);
  
  // 此时selectedTaskValue是任务ID，控制台会显示选中的带颜色任务名称
  console.log(`你选中的任务ID：${selectedTaskValue}`);
})();

方法2：自定义结果显示逻辑 #

如果方法1无效，可通过result选项隐藏组件默认输出，手动查找并显示任务名称：

const inquirer = require('inquirer');

const taskOptions = [
  { name: '\x1b[31m任务1：用户管理模块\x1b[0m', value: 'task_001' },
  { name: '\x1b[32m任务2：订单统计功能\x1b[0m', value: 'task_002' }
];

// 根据任务ID查找名称的工具函数
const getTaskNameById = (taskId) => {
  const matchedTask = taskOptions.find(task => task.value === taskId);
  return matchedTask ? matchedTask.name : taskId;
};

(async () => {
  const { task: selectedTaskValue } = await inquirer.prompt([
    {
      type: 'search-list',
      name: 'task',
      message: '请选择要处理的任务:',
      choices: taskOptions,
      // 覆盖默认结果输出，返回空字符串隐藏原输出
      result: () => ''
    }
  ]);
  
  // 手动输出选择结果（模拟原生list的显示效果）
  const selectedTaskName = getTaskNameById(selectedTaskValue);
  console.log(`? 请选择要处理的任务: ${selectedTaskName}`);
  
  // 后续业务逻辑使用selectedTaskValue（任务ID）
  console.log(`即将处理任务ID：${selectedTaskValue}`);
})();

关键说明 #

• 确保choices数组中的每个对象都包含name（显示文本）和value（实际返回值）两个字段；
• 手动编写ANSI颜色码时，注意结尾要加\x1b[0m重置样式，避免影响后续控制台输出；
• 若使用inquirer-search-list第三方包，建议升级到最新版本，新版本已修复部分name/value显示问题。

内容的提问来源于stack exchange，提问作者Austin Jacob