Verwenden von Selectize mit Node.js

Ich werde das vorweg sagen, dass ich ziemlich neu für Javascript im Allgemeinen bin, aber ich komme dorthin. Ich habe eine App, die mit Node.js, Express geschrieben wurde, und verwendet Bootstrap für das Frontend.Verwenden von Selectize mit Node.js

Ich versuche Selectize zu verwenden, um einige zusätzliche Funktionen mit einem meiner Formulare zu erhalten, aber ich kann es überhaupt nicht zur Arbeit bekommen. Das Texteingabefeld ist vorhanden, aber es fehlt mir die Funktionalität/das Styling, nach der ich suche. Ich benutze Lenker zum Templating, und ich denke, dass meine Probleme damit zu tun haben könnten.

Ich bin an diesem Punkt verloren, und jeder Rat wäre super nützlich.

Hier ist meine einfache Testseite:

<!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>

Quelle

2016-07-28 knoll

Werfen Sie einen Blick auf diese Antwort hier: http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer Es sieht aus wie Sie versuchen, JQuery vor ihm zu verwenden Ladungen. –

@Sweet_Pete, so eine einfache Lösung. Vielen Dank! – knoll

Ihre Begrüßung, Prost! –

Um Ihren Code Stil zu halten und Ihre Skripte am Ende des Dokuments platzieren, können Sie dies versuchen:

<!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>

Auf diese Weise wird ein verhindern jquery error, aber ich bin nicht vertraut mit selectize zu wissen, ob dieses Skript funktioniert, wie Sie es beabsichtigten.

Quelle

2016-07-28 17:07:40

Verwenden von Selectize mit Node.js

Antwort

Verwandte Themen