Selective.js does not work

Question

Selective.js does not work

Asked 9 years, 8 months ago

Viewed 204 times

2

I have a problem with my code. I cannot run the plugin selectize.js on this page. All paths are correct. The input appears and everything else, however, when I click to type, the plugin does not show the list of options and ending up not listing anything of mine options. What could be?

When playing in the browser, the following errors appear in the DOM:

testform.html:59 Uncaught Referenceerror: $ is not defined // $('#select-country'). selectize();

// Code of index.html

 <!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Selectize.js Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="css/selectize/normalize.css">
        <link rel="stylesheet" href="css/selectize/stylesheet.css">
        <script src="js/selectize/jquery.js"></script>
        <script src="js/selectize/selectize.js"></script>
        <link rel="stylesheet" href="css/selectize/selectizedefault.css">
        </style>
    </head>
    <body>

        <div class="control-group">

            <label for="select-country">Country:</label>
            <select id="select-country" class="demo-default selectized" placeholder="Select a country..." tabindex="-1" style="display: none;">
                <option value="" selected="selected"></option>
            </select>

            <div class="selectize-control demo-default single">
                <div class="selectize-input items not-full has-options">
                    <input type="text" autocomplete="off" tabindex="" placeholder="Select a country..." style="width: 111px; opacity: 1; position: relative; left: 0px;">
                </div>

                <div class="selectize-dropdown demo-default single" style="display: none; visibility: visible; width: 1703px; top: 36px; left: 0px;">

                    <div class="selectize-dropdown-content">
                        <div data-value="AF" data-selectable="" class="option">
                            Afghanistan
                        </div>
                        <div data-value="AX" data-selectable="" class="option">
                            Åland Islands
                        </div>
                        <div data-value="AL" data-selectable="" class="option">
                            Albania
                        </div>
                        <div data-value="DZ" data-selectable="" class="option">
                            Algeria
                        </div>
                        <div data-value="AS" data-selectable="" class="option">
                            American Samoa
                        </div>
                        <div data-value="AD" data-selectable="" class="option">
                            Andorra
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>

            $(function(){
            $('input').selectize({
            delimiter: ',',
            persist: false,
            create: function(input) {
              return {
                value: input,
                text: input
              }
            }
            });
            });

            $('#select-country').selectize();

        </script>

    </body>
</html>

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Renan Gomes • **19,011** points · Answer 1 · 2015-04-13T04:58:04+00:00

According to Github’s description plugin:

Selectize is the Hybrid of a textbox and box. It’s jQuery based and it has autocomplete and Native-feeling Keyboard navigation; Useful for tagging, contact lists, etc.

It has some dependencies. It is necessary to import the jQuery before making a call to selectize.js.

DOCUMENTATION

$(function(){
  $('input').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
});

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.0/css/selectize.css'/>

<input type='text' placeholder='Digite algo e pressione "enter" ou ","...'/>

<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.0/js/standalone/selectize.min.js'></script>