如何在数据表搜索输入周围包含span标签以将“清除搜索”功能与jquery集成?

时间:2013-02-16 13:09:38

标签: jquery css jquery-datatables

我想在数据表搜索字段中添加一个功能,点击输入字段中的图标可以清除搜索到的文本。

这里有一个明确的搜索jsfiddle:

http://jsfiddle.net/PJZmv/801/

我试图将其与数据表集成在一起:

http://jsfiddle.net/rwone/Y37hZ/

这些是我采取的步骤:

通过更改:

来自定义jquery.dataTables.js脚本
sSearchStr.replace('_INPUT_', '<input type="text" />') :
sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />';

为:

sSearchStr.replace('_INPUT_', '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>') :
sSearchStr==="" ? '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>' : sSearchStr+' <span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>';

并添加了这个css:

/* added clear search css */

.clearable {
position:relative;
}
.data_field {
padding-right:30px; /* add space for the 'x' icon*/
}
span.icon_clear {
position:absolute;
right: 9px;
display: none;
top: -2px;
cursor:pointer;
font: bold 14px sans-serif;
color:#cc0000 !important;  
}

span.icon_clear:hover {
color:#f52 !important;
}

/* end added clear search css */

然后添加了jquery:

$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});

但是你可以在jsfiddle中看到它还没有用。

因此,期望的结果是“清晰搜索”功能在数据表集成中工作,以及在独立的jsfiddle中工作。

1 个答案:

答案 0 :(得分:0)

替换你的代码

$(document).on('propertychange keyup input paste', 'input.data_field', function(){...

$(document).on('propertychange keyup input paste', 'input[name="data_field"]', function(){...

希望有所帮助。