使用Selectize和Node.js

我會在前言中說我對JavaScript一般都很陌生，但我到了那裏。我有一個用Node.js，Express編寫的應用程序，並使用Bootstrap作爲前端。使用Selectize和Node.js

我試圖用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>

來源

2016-07-28 knoll

看看這個答案在這裏：http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer 它看起來像你試圖使用JQuery之前負載。 –

@Sweet_Pete，這樣一個簡單的修復。謝謝！ – knoll

歡迎您，乾杯！ –

爲了使您的代碼風格，把你的腳本在文檔的末尾，你可以試試這個：

<!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的錯誤，但我不熟悉selectize知道這個腳本是否按照你的意圖工作。

來源

2016-07-28 17:07:40

使用Selectize和Node.js

回答

相關問題