我无法弄清楚如何使jquery ui自动完成库工作的选择方法。我试图把一个测试用例放在一起,但由于某种原因(xsrf?),测试没有带来结果。我的问题是没有得到结果并显示它们(当我在同一个域上发出请求时,它工作正常),我的问题是,在我在下拉菜单中得到结果后,没有任何反应,当我点击其中一个结果。jquery ui自动完成点击事件处理程序
test.js
<html><body>
<script type="text/javascript" src="./jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="./jquery-ui-1.8.17.custom.min.js"> </script>
<link rel="stylesheet" href="./jquery-ui.css" />
<script type="text/javascript" >
var cwJQ = jQuery.noConflict();
cwJQ(document).ready(function() {
$input = cwJQ('input#last_name');
var renderItemOverride = function (ul, item) {
return cwJQ("<li></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
$input.autocomplete({
source: function(req, res) {
cwJQ.ajax({
url: 'http://news.google.com/news/search',
dataType: 'html',
data: { "q": req.term
},
success: function(data) {
var datum = new Array;
cwJQ(data).find('a').each(function(i, val) {
datum.push("<span name='li-span'>" + cwJQ(val).text() + "</span>");
});
res(datum);
}
})
},
select: function(event, ui) {
alert();console.log();
},
minLength: 2
}).data('autocomplete')._renderItem = renderItemOverride;
cwJQ("#li-span").live('click', function() {
console.log(this);
});
});
</script>
<form>
<label class="autocomplete weight-normal">By last name</label>
<input type="text" name="last_name" size="35" class="width-full" id="last_name" />
</form>
</body></html>
的jquery-ui.css
.ui-menu {
padding: 0px;
background-color: #FFF;
overflow: hidden;
}
ul.ui-menu {
display: block;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #998F87;
overflow: auto;
max-height: 200px;
width: 200px;
}
ul.ui-menu li {
margin: 0px;
padding: 3px 5px;
cursor: pointer;
display: block;
font-size: 12px;
overflow: hidden;
}
span#undefined {
display: block;
background-color: #ffff00;
width: 100%;
margin: 0;
}
ul.ui-menu li:hover { background: #ff00ff; }
EDIT
工作的代码是:
var cwJQ = jQuery.noConflict();
cwJQ(document).ready(function() {
$input = cwJQ('input#last_name');
$input.autocomplete({
source: function(req, res) {
cwJQ.ajax({
url: 'url',
dataType: 'html',
data: { "name": req.term,
"name_in_id": 1
},
success: function(data) {
var datum = new Array;
cwJQ(data).find('li').each(function(i, val) {
datum.push({ value: cwJQ(val).text(), id: val.id.split('_')[1] });
});
res(datum);
}
})
},
select: function(event, ui) {
if(ui.item.id != undefined) {
addMemDat(ui.item.id, ui.item.value);
}
},
search: function() {
cwJQ(this).addClass("auto_complete_loading");
},
open: function(event, ui){
cwJQ(this).removeClass("auto_complete_loading");
},
close: function() {
$input.val('');
},
minLength: 2
}).data("autocomplete")._renderItem = function(ul, item) {
return cwJQ("<li></li>")
.data("item.autocomplete", item)
.append("<a><span id='" + item.id + "'>" + item.value + "</span></a>")
.appendTo(ul);
};
});
即第e _renderItem覆盖是不正确的(但也有添加/删除自动完成类与一些简单的CSS来显示一个微调框在输入框中,而检索结果。
嗡嗡声,那不正确的工作。然而,它让我删除代码来覆盖_renderItem方法,现在select方法似乎工作。 – ag4ve 2012-02-21 00:19:17
好吧,似乎我可以推{value:blah,id:blah}并获得访问权限,而不是将id放在span中等等。与CSS混了一下,但我想我可以用这个工作。谢谢大家。 – ag4ve 2012-02-21 00:21:32