如何仅修复页面上的一个Autocomplete实例?
问题的原因是,在使用Andrew Whitaker的代码时,如果选择了多个输入元素,第二个自动完成小部件将不显示任何条目。解决方法是在代码中添加一个foreach循环,以处理所有选择的输入元素。具体代码如下:
$("selector") .autocomplete({ ... }) .each(function () { $(this).data("autocomplete")._renderItem = function( ul, item ) { return $("") .data("item.autocomplete", item) .append("" + item.label + "" + item.desc + "") .appendTo(ul); }; });
这段代码可以解决多个实例的自动完成问题。感谢提供这个解决方法!
问题的原因是:在最近版本的jQuery和jQuery UI中,使用了新的语法和方法,导致之前的代码不再适用。
解决方法是:使用上述的代码来修补Autocomplete的一个实例。该代码将重新定义_renderItem函数,用于自定义Autocomplete的选项显示方式。
以下是解决方法的完整内容:
对于最近版本的jQuery(1.8+)/ jQuery UI(1.10+),你应该使用以下代码来修补Autocomplete的一个实例:
$("selector").autocomplete({ ... }).data('uiAutocomplete')._renderItem = function( ul, item ) { return $( "" ) .data( "item.autocomplete", item ) .append( "" + item.label + "" + item.desc + "" ) .appendTo( ul ); };
这段代码重新定义了_renderItem函数,它接受两个参数ul和item。ul是自动生成的ul元素,item是每个选项的数据。
在这个函数中,我们使用jQuery的方法来创建一个新的li元素,并将item的数据存储在其中。然后,我们使用append方法将包含item.label和item.desc的a元素添加到li元素中。最后,我们将li元素添加到ul元素中。
通过这种方式,您可以根据自己的需求自定义Autocomplete的选项显示方式。
问题的出现的原因:在某个页面上只想修补一个自动完成组件实例,但是在IE浏览器中无法使用data()
方法,而且在Webkit浏览器中当鼠标悬停在数据上时数据会消失。
解决方法:使用.data('uiAutocomplete')
代替.data('autocomplete')
,或者使用.data('ui-autocomplete')
。根据不同的jQueryUI版本,选择不同的方法。如果问题仍然存在,最好提出一个新的问题。
以下是解决方法的整理:
在这个页面上查看自定义数据和显示示例。这个示例没有修改自动完成小部件的原型对象,这意味着只有该小部件的实例会受到影响:
$("selector").autocomplete({ ... }).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); };
这是一个可工作的示例:http://jsfiddle.net/vJSwq/
在IE中似乎不起作用,错误始终是“data(...)
为null或不是对象”。这种情况下,data
实际上不支持吗?来自api.jquery.com/data的示例可以正常工作,该页面上唯一的警告是IE不允许以这种方式操纵XML。
尝试使用.data('uiAutocomplete')
代替。这是在最新版本的jQueryUI中进行的更改。
如果在WebKit中遇到“尝试分配给只读属性”的错误,请尝试使用.data('ui-autocomplete')
。
目前,这个页面上的最后一个示例建议使用.data('ui-autocomplete')
。
我在使用自动完成的jQuery UI时遇到了一个问题,当我将鼠标悬停在数据上时,数据会消失。
解决这个问题最好是提出一个新的问题。