CODEWITHSUNDEEP
javascriptjqueryselectize.js
Jolly Oli
Jolly Oli

Reputation: 3

Selectize.js not working at all

For some reason I am not able to get Selectize.js working on my project at all. I have checked all the jQuery links and they seem to be fine, but when I view the page all I get is a simple HTML drop down menu. I can't type directly into the box and there is no option to auto complete or add a new entry as at http://selectize.github.io/selectize.js/ (Single Item Select sub heading)

I have tried to copy the simplest example from the Selectize site but even that doesn't work. I can get a simple 'alert' pop up box to work so I know that jQuery is working. The file address selectize/selectize.min.js is also correct.

I would appreciate any help.

HTML:

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
    <link rel="stylesheet" href="selectize/normalize.css">
    <link rel="stylesheet" href="selectize/styles.css">
    <link rel="stylesheet" href="selectize/default.css" data-theme="default">

    <!--[if IE 8]><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->
    <script type="text/javascript" src="selectize/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="selectize/selectize.min.js"></script>
    <script type="text/javascript" src="selectize/myjquery.js"></script>

</head>

<body>

<section class="demo" id="demo-single-item-select">
                <div class="header">
                    Single Item Select
                </div>
                <div class="sandbox">
                    <label for="select-beast">Beast:</label>
                    <select id="select-beast" class="demo-default" placeholder="Select a person...">
                        <option value="">Select a person...</option>
                        <option value="1">Chuck Testa</option>
                        <option value="4">Sage Cattabriga-Alosa</option>
                        <option value="3">Nikola Tesla</option>
                    </select>
                </div>

        <div class="description">
                    The most vanilla of examples.
                </div>

</section>


</body>
</html>

myjQuery:

$(document).ready(function() {

   //alert('Ahoy hoy');
   $('#select-beast').selectize({
                    create: true,
                    sortField: 'text',
                    searchField: 'item',
                    create: function(input) {
                        return {
                            value: input,
                            text: input
                    }
}
                });


   });

Upvotes: 0

Views: 5758

Answers (1)

Тимур Карагулов
Тимур Карагулов

Reputation: 46

<option value="">Select a person...</option>

remove value attribute or give it any name

Upvotes: 0

Related Questions