2011-11-16 42 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