2

我的页面上有一个相当简单的 jquery-ui 自动完成框。HTML 很简单，如下所示：

<div class="control-group">
    <label for="addCampaignUser"></label>
    <div class="controls">
        <input id="addCampaignUser" />
        <button id="addCampaignUserButton">Add User</button>
    </div>
</div>

JavaScript 有点复杂，但还算不错：

$('#addCampaignUser').autocomplete({
    minLength: 2,
    source: function (request, response) {
        var term = request.term;
        if (term in cache) {
            response(cache[term]);
            return;
        }

        $.post("@Url.Action("ForCampaignAutoComplete", "CustomerUser")", { "searchTerm": request.term })
            .done(function (data) {
                console.log('{request: ' + JSON.stringify(request) + "}");
                console.log('{data: ' + JSON.stringify(data) + "}");
                cache[request.term] = data;
                response(data);
            })
            .fail(function (err) {
                console.error(err);
            });
    },
    select: function (event, ui) {
        console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
    },
    close: function(event, ui) {
        console.log("closed: " + event);
    }
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
};

一切似乎都按预期工作：

工作 jquery-ui-autocomplete

问题是，只要我将鼠标悬停在列表中的任何项目上，或者如果我尝试通过向上/向下箭头选择其中一个项目，列表就会关闭，而不会选择任何内容（或触发selector事件）。focus

我尝试<a>在处理程序中删除 item.Name 周围的标签.data("ui-autocomplete")，如下所示：

        .data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
        };

这解决了自动关闭问题，但没有任何东西被选中。

我已经尝试禁用所有可能会干扰的各种附加组件和库，但到目前为止还没有。我正在使用 jquery-2.0.3.js 和 jquery-ui-1.10.3.js。

我在做一些明显错误的事情吗？

[编辑：根据要求包括整个页面的代码]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/Content/bootstrap?v=j_-_1Zyowtnxf-sjdU3kRasY7Qp7ZP_jWGqEkV333nA1" rel="stylesheet"/>

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="/scripts/html5shiv.js"></script>
    <![endif]-->


</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">Payboard</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="/customer/index">Customers</a></li><li><a href="/campaign/index">Campaigns</a></li><li><a href="/integration/index">Integrations</a></li><li><a href="/account/index">Account</a></li><li><a href="/account/logout">Logout</a></li><li><a href="/test/index">Test</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">



        <h2>AutoComplete</h2>

<h4>End users assigned to the campaign</h4>
<div class="control-group">
    <label for="addCampaignUser"></label>
    <div class="controls">
        <input id="addCampaignUser" />
        <button id="addCampaignUserButton">Add User</button>
    </div>
</div>




        <hr>
        <footer>
            <p>&copy; Payboard 2013</p>
        </footer>
    </div>
    <script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/flot/jquery.flot.js"></script>
<script src="/Scripts/flot/jquery.flot.time.js"></script>
<script src="/Scripts/flot/jquery.flot.stack.js"></script>
<script src="/Scripts/flot/jquery.flot.categories.js"></script>
<script src="/Scripts/bootstrap.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <!-- Payboard JS bundle -->
    <script src="/Scripts/knockout-2.3.0.debug.js"></script>
<script src="/Scripts/jquery.event.drag.js"></script>
<script src="/Scripts/SlickGrid/slick.core.js"></script>
<script src="/Scripts/SlickGrid/slick.formatters.js"></script>
<script src="/Scripts/SlickGrid/slick.grid.js"></script>
<script src="/Scripts/require.js"></script>
<script src="/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/Payboard/Main.js"></script>
<script src="/Scripts/dateformat.js"></script>


    <script type="text/javascript">

        // Payboard.ready(function () {
        $(function () {

            var cache = {};

            $('#addCampaignUser').autocomplete({
                minLength: 2,
                source: function (request, response) {
                    var term = request.term;
                    if (term in cache) {
                        response(cache[term]);
                        return;
                    }

                    $.post("/CustomerUser/ForCampaignAutoComplete", { "searchTerm": request.term })
                        .done(function (data) {
                            console.log('request: ' + JSON.stringify(request));
                            console.log('data: ' + JSON.stringify(data));
                            cache[request.term] = data;
                            response(data);
                        })
                        .fail(function (err) {
                            console.error(err);
                        });
                },
                select: function (event, ui) {
                    console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
                },
                focus: function (event, ui) {
                    console.log(ui.item ? "Focused: " + ui.item.Name : "Nothing focused, input was " + this.value);
                }
            })
            .data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
                // return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
            };
        });

    </script>

</body>
</html>
4

1 回答 1

4

看起来你包含 jQueryUI 两次。一旦来到这里：

<script src="/Scripts/jquery-ui-1.10.3.js"></script>

再次在这里：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

这可能会导致您的问题 - 删除其中一个引用。

于 2013-08-13T18:07:19.450 回答