使用jquery加载selectize.js选项_Jquery_Selectize.js

使用jquery加载selectize.js选项

jquery

使用jquery加载selectize.js选项,jquery,selectize.js,Jquery,Selectize.js,我需要加载一个大的JSON文件，以成为selectize.js输入字段的菜单选项。在我下面的工作示例中，直到用户首先在框中键入内容，才会进行AJAX调用。感谢您在页面开始时帮助加载JSON文件 countries.json [{"name":""}, {"name":"Afghanistan"}, {"name":"Belgium"}, {"name":"China"},{"name":"Denmark"}, {"name":"Estonia"}, {"name":"Finland"}, {"n

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

countries.json

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

index.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>


选择
选择
$（“#国家”）。选择({
valueField:'名称'，
valueField:'名称'，
拉贝尔菲尔德：“名字”，
最大项目：3，
选项：[]，
加载：函数（查询、回调）{
如果（！query.length）返回callback（）；
$.ajax({
url:'countries.json'，
键入：“GET”，
数据类型：“json”，
数据：{国家：查询，}，
错误：函数（）{callback（）；}，
成功：函数（res）{callback（res）；}
});
}
});

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,
    });
    }
});