1

Use bootstrap-select for keyword selection control

This commit is contained in:
Alex Yatskov 2014-09-15 18:01:22 +09:00
parent a7fc6c1762
commit d21d0f8879
3 changed files with 8 additions and 2 deletions

View File

@ -86,6 +86,8 @@
}, },
ready: function() { ready: function() {
$('.selectpicker').selectpicker();
$.getJSON('/node/keywords', function(keywords) { $.getJSON('/node/keywords', function(keywords) {
for (var i = 0, count = keywords.length; i < count; ++i) { for (var i = 0, count = keywords.length; i < count; ++i) {
$('#keywords').append($('<option></option>', { $('#keywords').append($('<option></option>', {
@ -94,6 +96,7 @@
})); }));
} }
$('.selectpicker').selectpicker('refresh');
$('#search').prop('disabled', false); $('#search').prop('disabled', false);
$('#search').click(onSearch); $('#search').click(onSearch);
}); });

View File

@ -17,6 +17,7 @@
"closurelibrary": "*", "closurelibrary": "*",
"fabric": "~1.4.8", "fabric": "~1.4.8",
"handlebars": "~1.3.0", "handlebars": "~1.3.0",
"underscore": "~1.6.0" "underscore": "~1.6.0",
"bootstrap-select": "~1.6.2"
} }
} }

View File

@ -5,6 +5,7 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@ -21,7 +22,7 @@
<div class="form-group"> <div class="form-group">
<label for="keywords" class="col-md-2 control-label">Keywords</label> <label for="keywords" class="col-md-2 control-label">Keywords</label>
<div class="col-md-10"> <div class="col-md-10">
<select id="keywords" class="form-control" name="keywords" multiple="multiple"></select> <select id="keywords" class="form-control selectpicker" multiple="multiple" data-max-option="4" data-live-search="data-live-search" name="keywords"></select>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -103,6 +104,7 @@
<script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/fabric/dist/fabric.min.js"></script> <script src="bower_components/fabric/dist/fabric.min.js"></script>
<script src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="application.js"></script> <script src="application.js"></script>
<script src="grapher.js"></script> <script src="grapher.js"></script>