JQuery Autocomplete 源码是一个函数

Posted

技术标签:

【中文标题】JQuery Autocomplete 源码是一个函数【英文标题】:JQuery Autocomplete source is a function 【发布时间】:2011-12-30 12:36:39 【问题描述】:

我正在为不同的字段使用 JQuery UI 自动完成功能。为了获取数据,我使用函数作为源。它工作得很好! 我想知道是否有一种方法不在源代码中使用匿名函数,而是声明一个通用函数,该函数将有一个参数来重定向到正确的 URL。 我是 JS 和 JQuery 的新手,所以我不知道参数 request 和 response 来自匿名函数。 这是我想要做的:

    $ac.autocomplete(
        //Call the function here, but what are the parameter request and response???
        source: autocomplete(),
        minLength: 1
    );

这是我要调用的函数

function autoComplete(request, response, url) 
    $.ajax(
        url: '/Comp/'+url,
        dataType: "json",
        type: "POST",
        success: function (data) 
            response($.map(data, function(item) 
                return  label: item, value: item, id: item ;
            ));
        
    );

非常感谢您的帮助。

【问题讨论】:

【参考方案1】:

你应该使用

source: autoComplete

而不是

source: autocomplete()

再说一句。 jQuery UI Autocomplete 的默认实现只使用valuelabel,而不使用id

【讨论】:

ID 是默认字段,请参见此处的示例源代码:jqueryui.com/autocomplete/#remote @FelixEve:对不起,我不同意你的观点。 The documentation 只描述了服务器响应的两种标准表示:字符串数组和具有valuelabel 属性的项目数组。如果项目有一些其他自定义属性,这些属性将被保存,但不会被 jQuery UI 自动完成以任何方式使用。必须覆盖_renderItem 方法,例如在渲染或选择期间使用id 等属性。【参考方案2】:

重新格式化你的问题将成为问题的解决方案。:)

 $ac.autocomplete(
     minLength: 1 ,
     source: function(request, response, url)
                var searchParam  = request.term;

    $.ajax(
              url: '/Comp/'+url,
             data : searchParam,
             dataType: "json",
            type: "POST",
            success: function (data) 
                    response($.map(data, function(item) 
                    return  
                        label: item.Firstname,
                        value: item.FirstName
                        ;
                    );
                    
            );//ajax ends 
            
 ); //autocomplete ends

requestresponse 对象是 jQuery UI 所期望的。 request.term 将为您提供用户键入的文本,response 方法将返回 labelvalue 小部件工厂的项目以显示建议下拉列表

P.S : 假设你的 JSON 字符串包含一个 FirstName 键!

【讨论】:

【参考方案3】:

我将举一个发生在我身上的情况的例子,可以作为一个例子:

情况:用户使用 Jquery Autocomplete 选择关键字后,不允许将其列出。考虑到查询执行相同,即未修改的猫。服务器端。

代码如下所示:

$( "#keyword-search" ).autocomplete(
    minLength: 3 ,
    source: function( request , response ) 
        var param =  keyword_type: type , keyword_search: request.term  ;
        $.ajax(
            url: URI + 'search-to-json',
            data : param,
            dataType: "json",
            type: "GET",
            success: function (data) 
                response($.map(data, function( item ) 
                    /* At this point I call a function, I use to decide whether to add on the list to be selected by the user. */
                    if ( ! is_record_selected( item ) ) 
                        return item;
                    
                ));
            
        );
     ,
    select: function( event , ui ) 
        /* Before you add, looking if there is any cell */
        /* If it exists, compare the id of each cell not to add an existing */
        if ( validate_new_keyword( ui ) ) 
            add_cell( ui ) ;
        
     ,
);

/* Any validation... */
function validate_new_keyword( ui ) 
    var keyword_id = $.trim(ui.item.id) ;
    Any condition...
    if (keyword_id > 0) 
        return true ;           
    

    return false ;


/* This function checks if a keyword has not been selected by the user, it checks for the keyword_array. */
function is_record_selected( item ) 
    var index = jQuery.inArray( item.id , keyword_array ) ;
    return index == -1 ? false : true;

Obs:因此可以在“source”和“select”中使用函数。 =p

【讨论】:

以上是关于JQuery Autocomplete 源码是一个函数的主要内容,如果未能解决你的问题,请参考以下文章

jquery - (...).autocomplete 不是一个函数

jQuery.autoComplete 多参数

jquery autocomplete控件无法匹配

jquery autoComplete 插件

JQuery easyui里面的自动完成autocomplete插件

Jquery Autocomplete 未能获得焦点