0

我是网络开发的新手。我正在尝试使用 select2-bootstrap。它工作正常。只需要css帮助。

小部件的初始显示：在此处输入图像描述

条之间有一个缩进（在Search for a movie和之间No matches found）

单击小部件后，它看起来很好，如此处所示，此后凹痕即使在后续使用时也会消失。在此处输入图像描述

有人可以建议如何去除上面第一张图片中两个条之间的凹痕。

注意：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