使用 jquery 加载选择.js选项

我需要加载一个大的JSON文件才能成为selectize.js输入字段的菜单选项。在下面的工作示例中，直到用户首先在框中键入内容，才会进行 AJAX 调用。感谢帮助在页面开始时加载 JSON 文件。

国家.json

[{"name":""}, {"name":"Afghanistan"}, {"name":"Belgium"}, {"name":"China"},{"name":"Denmark"}, {"name":"Estonia"}, {"name":"Finland"}, {"name":"Greece"}]

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>selectize</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
</head>
<body>
  <label for="countries">Selectize</label>
  <select class="form-control pickerSelectClass" id="countries"></select>
<script>
$('#countries').selectize({
  valueField: 'name',
  valueField: 'name',
  labelField: 'name',
  maxItems: 3,
  options: [],
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
      url: 'countries.json',
      type: 'GET',
      dataType: 'json',
      data: { country: query, },
      error: function() { callback(); },
      success: function(res) { callback(res); }
    });
  }
});
</script>
</body>
</html>

IRC 频道中的一位善良的人向我指出了这个解决方案，它似乎工作得很好：

$.ajax({
  url: 'countries.json',
  type: 'GET',
  dataType: 'json',
  data: { json: JSON.stringify(countries) },
  error: function(err) { console.log(err); },
  success: function(options) {
    $('#countries').selectize({
    valueField: 'name',
    labelField: 'name',
    searchField: 'name',
    maxItems: 3,
    preload: true,
    options: options,
    create: true,
    });
    }
});

相关内容

最新更新

热门标签：