Selective.js does not work

Question

Selective.js does not work

Navigation

#1 by (1 votes)

2

I have a problem with my code. I can not 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 ends up not listing anything of my options . What could it be?

When I play in the browser, the following errors appear in the DOM:

test-form.html: 59 Uncaught ReferenceError: $ is not defined // $ ('# select-country') selectize ();

// Code for 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>

javascript

asked by anonymous 13.04.2015 / 06:14

1 answer

Assign value to a Select by option text via Webbrowser Linked lists in Java

score 1 · Answer 1

According to the plugin GitHub description:

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. You need to import jQuery before making a call to selectize.js .

DOCUMENTATION kbd>

$(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>