Question

我之前说过，我对Javascript一般都是新手，但我已经到了那里。我有一个用Node.js，Express编写的应用程序，并使用Bootstrap作为前端。

我尝试使用Selectize来获取其中一个表单的其他功能，但我无法让它工作。文本输入字段存在，但它缺乏我正在寻找的功能/样式。我使用Handlebars进行模板制作，我认为我的问题可能与此有关。

我在这一点上输了，任何建议都会非常有用。

这是我的简单测试页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
    <!-- Icon -->
    <link href="/images/favicon.ico" rel="icon">
    <!-- Selectize.js -->
    <link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
    <h1>Testbed2</h1>
    <br>

    <div class="demo">
        <input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
    </div>

    <script>
        var data = [ "option 1", "option 2", "option 3" ];
        var items = data.map(function(x) { return { item: x }; });

        $('#input-tags').selectize({
            delimiter: ',',
            persist: false,
            maxItems: 2,
            options: items,
            labelField: "item",
            valueField: "item",
            sortField: 'item',
            searchField: 'item'
        });
    </script>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

为了保持代码风格并将脚本放在文档的末尾，您可以尝试：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
    <!-- Icon -->
    <link href="/images/favicon.ico" rel="icon">
    <!-- Selectize.js -->
    <link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
    <h1>Testbed2</h1>
    <br>

    <div class="demo">
        <input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
    </div>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
        var data = [ "option 1", "option 2", "option 3" ];
        var items = data.map(function(x) { return { item: x }; });

        $('#input-tags').selectize({
            delimiter: ',',
            persist: false,
            maxItems: 2,
            options: items,
            labelField: "item",
            valueField: "item",
            sortField: 'item',
            searchField: 'item'
        });
    </script>
  </body>
</html>

这种方式可以防止出现jquery错误，但我不熟悉选择，知道这个脚本是否按预期工作。

在Node.js中使用Selectize

1 个答案: