2011-11-16 40 views
3

我正在使用JQuery UI自动完成,为不同的领域。为了获取数据,我使用一个函数作为源。它的工作很棒! 我想知道是否有一种方法不在源中使用匿名函数,而是声明一个通用的函数,该函数将有一个参数重定向到正确的URL。 我在JS和JQuery方面很新,所以我不知道参数请求和响应来自匿名函数。 这里是我想要做的事:JQuery自动完成源是一个函数

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

非常感谢您的帮助作用。

回答

3

,您应该使用的

source: autoComplete 

代替

source: autocomplete() 

还有一个备注。 jQuery UI自动完成的默认实现仅使用valuelabel,而不是使用id

+0

ID是一个默认字段,请参阅此处的示例源代码:http://jqueryui.com/autocomplete/#remote –

+0

@FelixEve:对不起,但我不同意你的看法。 [The documentation](http://api.jqueryui.com/autocomplete/#option-source)只描述了服务器响应的两个标准表示:字符串数组和具有'value'和'label'属性的项目数组。如果这些项目具有其他自定义属性,那么这些属性将被保存,但不会以任何方式由jQuery UI自动完成使用。必须覆盖[_renderItem](http://api.jqueryui.com/autocomplete/#method-_renderItem)方法,例如在渲染或选择过程中使用像'id'这样的属性。 – Oleg

+0

我纠正 - 奥列格是正确的。 –

0

重新格式化乌尔问题将对作为解决问题的方法。:)

$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 

请求响应目的通过jQuery的用户界面的预期。该request.term将要给你的文本的用户类型和响应方法将返回标签项目到小部件的工厂,用于显示建议下拉列表

PS:假设你的JSON字符串包含一个姓氏键!

1

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

情况:用户选择使用jQuery自动完成关键词后不允许其上市。考虑到查询执行相同,即未修正的猫。服务器端。

的代码看起来是这样的:

$("#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; 
} 

观测值:因此,可以使用函数内部“源”和“选择”。 = p