0

私はウェブ開発に不慣れです。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>
4

0 に答える 0