Selectize.js pre populate

问题

I have the following selectize.js :

  $("#abc").selectize({
      valueField: 'name',
      labelField: 'name',
      searchField: ['name'],
      plugins: ['remove_button'],
      createOnBlur: true,
      maxItems: 10,
      preload: true,
      create:function (input){
        callback({ name:'Cricket', name:'Football', name : 'Tennis'})
      },
  });

The html code is :

<select id="abc" name="sport[]"></select>

I want the Cricket, Football, Tennis to pre load, Means it should be auto loaded on page load. But the options are not loading, What am i missing ?

回答1:

Seems like you might just be looking for the options property to set the initial list of selection options and the items property to select the ones you want defaulted. If so, you don't need the create function (which is there to enable you to customize the handling of user entered options). See below.

$('#abc').selectize({
  options: [
    {name: 'Cricket'},
    {name: 'Football'},
    {name: 'Tennis'}
  ],
  items: [
    'Cricket',
    'Football',
    'Tennis'
  ],
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  plugins: ['remove_button'],
  createOnBlur: true,
  maxItems: 10,
  preload: true
});

<!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">
  </head>

  <body>

    <form action="" method="POST">
      <input id="abc" name="abc" type="text" />
      <button type="submit">Submit</button>
    </form>
    
    <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>

  </body>

</html>

来源：https://stackoverflow.com/questions/51545561/selectize-js-pre-populate

标签

javascript

jquery

html

selectize.js