私はウェブ開発に不慣れです。select2-bootstrap を使用しようとしています。それは正常に動作します。CSSのヘルプが必要です。
ウィジェットの初期表示:
Search for a movieバーの間（との間No matches found）にインデントがあります
ウィジェットをクリックすると、ここに示すようにきれいに見え、その後使用してもへこみが消えます。
上の最初の写真の 2 つのバーの間のへこみを取り除く方法を誰かが提案できますか。
注: CSS の追加: select2.css、select2-bootstrap.css、bootstrap.css
JS の追加: bootstrap.js、jquery-1.9.1.js、select2.js
No matches foundまた、ページ読み込み直後の表示を回避する方法を提案してください。
コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>