私のページにはかなり単純な 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);
};
すべてが期待どおりに動作するようです:
問題は、リスト内の項目のいずれかにマウスを合わせるか、または上下矢印を使用して項目の 1 つを選択しようとすると、何も選択されずにリストが閉じてしまうことです (selectまたは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>© 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>