如何仅修复页面上的一个Autocomplete实例?

5 浏览
0 Comments

如何仅修复页面上的一个Autocomplete实例?

这个答案描述了如何对jqueryUI自动完成插件进行自定义格式化,以便以特定方式显示。它使用的方法是替换$.ui.autocomplete.prototype上的一个函数。这意味着所有的自动完成小部件都会得到这个补丁。是否有一种方法只对一个输入元素进行自动完成小部件的补丁?它是什么?当我检查$('$input').autocomplete时,我看不到任何自动完成函数(_renderItem、_renderMenu、_search等)。

0
0 Comments

问题的原因是,在使用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); }; });

    这段代码可以解决多个实例的自动完成问题。感谢提供这个解决方法!

    0
    0 Comments

    问题的原因是:在最近版本的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的选项显示方式。

    0
    0 Comments

    问题的出现的原因:在某个页面上只想修补一个自动完成组件实例,但是在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时遇到了一个问题,当我将鼠标悬停在数据上时,数据会消失。

    解决这个问题最好是提出一个新的问题。

    0