JQuery可重用的自动完成功能

时间:2011-11-30 17:16:01

标签: jquery jquery-ui jquery-ui-autocomplete

大家好朋友,

我在为自动完成功能添加.data自定义渲染时遇到语法问题。

我在哪里/如何添加:

.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;
        }        
    });          
} 

保留它的正确方法是什么,它适用于多个输入,好吗?谢谢!

可选信息: 我正在实现在Part 1和Andrew Whitaker here中提到的令人敬畏的代码。

我使用它来保持通用,因为我的自动完成将至少在四个字段上重复。

如果我尝试在函数中添加它,它会提醒我Netbeans IDE中的语法错误。

1 个答案:

答案 0 :(得分:3)

您应该可以将其添加到autocomplete电话的末尾:

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定义(我假设在别处定义)。