问用jquery加载selectize.js选项
EN

Stack Overflow用户

提问于 2017-12-31 01:31:28

回答 1查看 2.9K关注 0票数 0

为了成为selectize.js输入字段的菜单选项，我需要加载一个大的JSON文件。在下面的示例中，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>

jquery

selectize.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-31 23:31:43

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48039266

复制

相似问题

问用jquery加载selectize.js选项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jquery加载selectize.js选项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jquery加载selectize.js选项
EN