selectize.addItem(value) 添加项目的值而不是项目标签

Question

我发现了很多其他问题，但他们所有的答案都无法解决我的问题。

我正在尝试将 selectize.js 输入的值设置为指定值。

这是我正在做的事情：

$select = $picker.selectize({
  valueField: 'id',
  labelField: 'displayName',
  searchField: 'displayName',
  options: [],
  create: false,
  // ... Omitted
});

if (initialValue.length > 0) {
  // Do a search for the user.
  jQuery.getJSON("/_api/GetUserById?Id=" + initialValue, function(data) {
    var results = data.value;
    if (results.length == 1) {
      $select[0].selectize.addOption(results[0]);
      $select[0].selectize.addItem(results[0].id);
    }
  }, function(err) {
    initialSearchForUserFailed(err);
  });

这确实成功更改了输入的值，但是，addItem 方法将用户 ID 添加到选择输入而不是他们的显示名称。

Answer 1

可能是您的 searchField 值需要格式化为数组，但我无法重现您看到的显示问题。此外，数据从远程源返回的方式也可能存在问题。请参阅下面可能会帮助您解决问题的工作示例：

// placeholder for data retrieved from remote source
const options = [
  { value: 1, text: 'Annie' },
  { value: 2, text: 'Bart' },
  { value: 3, text: 'Carol' }
];

// init selectize input
const field = $('#select1').selectize({
  options: [],
  placeholder: 'Select...',
  valueField: 'value',
  labelField: 'text',
  searchField: ['text'],
  create: false
});

// change the index to simulate retrieving a different option
const option = options[0];

// add first option to selectize input and select it
field[0].selectize.addOption(option);
field[0].selectize.addItem(option.value);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
  </head>
  <body>
    <form action="" method="POST">
      <input id="select1" name="select1" type="text" />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

selectize.addItem(value) 添加项目的值而不是项目标签

selectize.addItem(value) adds the value of the item and not the items label

javascript

jquery

selectize.js