jQuery可重用的自动完成功能 [英] JQuery reusable autocomplete function

问题描述

SO朋友你好，

在将.data自定义渲染添加到此自动完成功能时，我在语法上遇到了麻烦.

I am having trouble with my syntax in adding a .data custom render to this autocomplete function.

我在哪里/如何添加:

.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.value + " | " + item.desc + "</a>" )
                .appendTo( ul );
};

此代码:

function Autocomplete(numberLocation,nameLocation,dscLocation,chargeLocation) {
    $(numberLocation).autocomplete ({
        minLength: 4, 
        source: function(request, response){             
            var fundnum = $(numberLocation).val(); 
            fundnum = escape(fundnum); 
            var querystring = "?term=" + fundnum; 
            if (typeof (window.sortorder)=='undefined'){
                querystring = querystring + '&sortorder=0'
            } else {
                querystring = querystring + '&sortorder=' + window.sortorder;                
            }
            $.ajax({
                url:      'ajax/fundid-autocomplete.php'+querystring,
                beforeSend: function(){},
                async:    true,
                dataType: "json",
                success: response
            });
        },
        focus: function ( event,ui ){     
            $(numberLocation).val( ui.item.value );
            return false;            
        },
        select: function( event, ui ) {          
                $(numberLocation).val( ui.item.value );
                $(nameLocation).html( ui.item.desc );                     
                    if(ui.item.dsc >0) {
                        chargeLocation.hide();                    
                        dscLocation.show();                          
                        dscLocation.html('DSC Charge: '+ui.item.dsc+' %');
                    } else {
                        dscLocation.html('');                    
                        chargeLocation.show();                       
                    }  
                    $('#numberlabel').html('Fund #*');
                return false;
        }        
    });          
} 

保持它正确的方法是什么，以便它可以与多个输入一起使用?谢谢！

What's the right way to keep it so that it works with multiple inputs, please? Thanks!

可选信息: 我正在实现在第1部分和安德鲁·惠特克(Andrew Whitaker)的此处.

Optional info: I am implementing the awesome code mentioned at: Part 1 and from Andrew Whitaker here.

我正在使用它来保持通用性，因为我的自动完成功能将至少在四个字段上重复.

如果我尝试将其添加到函数中，它会警告我Netbeans IDE中的语法错误.

I am using this to keep it generic, since my autocomplete will be repeated on at least four fields.

If I try to add it within the function it alerts me of a syntax error in Netbeans IDE.

推荐答案

您应该可以将其添加到autocomplete调用的末尾:

You should be able to add it to the end of the autocomplete call:

function Autocomplete(numberLocation,nameLocation,dscLocation,chargeLocation) {
    $(fundNumberField).autocomplete ({
        minLength: 4, 
        source: function(request, response){             
            var fundnum = $('#str-misc-FundNumber1').val(); 
            fundnum = escape(fundnum); 
            var querystring = "?term=" + fundnum; 
            if (typeof (window.sortorder)=='undefined'){
                querystring = querystring + '&sortorder=0';
            } else {
                querystring = querystring + '&sortorder=' + window.sortorder;                
            }
            $.ajax({
                url:      'ajax/fundid-autocomplete.php'+querystring,
                beforeSend: function(){},
                async:    true,
                dataType: "json",
                success: response
            });
        },
        focus: function ( event,ui ){     
            $(numberLocation).val( ui.item.value );
            return false;            
        },
        select: function( event, ui ) {          
                $(numberLocation).val( ui.item.value );
                $(nameLocation).html( ui.item.desc );                     
                    if(ui.item.dsc >0) {
                        chargeLocation.hide();                    
                        dscLocation.show();                          
                        dscLocation.html('DSC Charge: '+ui.item.dsc+' %');
                    } else {
                        dscLocation.html('');                    
                        chargeLocation.show();                       
                    }  
                    $('#numberlabel').html('Fund #*');
                return false;
        }        
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.value + " | " + item.desc + "</a>" )
                .appendTo( ul );
    };         
}

当我通过JSLint运行该代码时，我实际上没有任何问题(我确实在source函数中添加了一个缺少的分号).唯一缺少的是fundNumberField定义(我假设是在其他地方定义的).

When I run that code through JSLint I don't really have any issues (I did add a missing semicolon inside the source function). The only thing that's missing is the fundNumberField definition (I'm assuming that's defined elsewhere).

这篇关于jQuery可重用的自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！