jquery ui自动完成点击事件处理程序
jquery ui autocomplete click event handler
我不知道如何让jquery ui自动完成库的select方法发挥作用。我试着把一个测试用例组合在一起,但由于某种原因(xsrf?)测试没有带来结果。我的问题不是获取结果并显示它们(当我在同一个域上提出请求时,这很好),我的问题是,在下拉菜单中获得结果后,当我点击其中一个结果时,什么都不会发生。
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; }
编辑
工作代码为:
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 );
};
});
即,_renderItem覆盖不正确(但也添加/删除了带有一些简单css的自动完成类,以便在检索结果时在输入框中显示微调器。
添加到Dmitry的回复中-您可能需要更改
select: function( event, ui ) {
alert();
}
至
select: function( event, ui ) {
alert(ui.item.value);
}
你能试试这个吗:
datum.push({ value: "<span name='li-span'>" + cwJQ( val ).text() + "</span>" });
而不是这个:
datum.push( "<span name='li-span'>" + cwJQ( val ).text() + "</span>" );
它对我有效…
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 如何在jQuery事件处理程序中存储和重用超时
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 异步处理所有事件处理程序的方法
- jsplumb中的Click事件处理程序丢失“;这个“;对象
- 构造函数中的事件处理程序与构造函数外的事件处理函数的行为不同
- 如何在事件处理程序的回调中防止Default