2016-02-16 34 views
0

我正在用我製作的一個替換jQuery-ui自動完成庫。老初始化爲我輸入元素看起來是這樣的:如何在jquery/js中模擬此回調的功能?

$('#search_input').autocomplete({ 
    minLength: 2, 
    select: function(event, ui) { 
    $('.some_element').val('ui.item.id'); 
    return false; 
    } 
}); 

我的新的自動完成庫看起來是這樣的:

$.fn.custom_search = function() { 
    $(this).on('keydown click', (e) function(){ 
    switch e.type { 
    case 'keydown': 
     ... 
     search_term = $(this).val(); 
     ajax_caller(search_term); 
     break; 
    case 'click' 
     ... 
     break; 
    } 

}; 

我怎麼能保持從jQuery UI的自動完成「選擇」功能?我希望在初始化程序中選擇的所有內容都會觸發從我的自定義自動完成搜索結果中選擇的項目。

在「ajax_caller」函數傳遞搜索項到控制器。控制器編譯列表並將其返回給js.erb,該列表創建搜索項結果列表並將其附加到輸入的底部。

的選擇回調應該在有人選擇從搜索詞語結果的選項被解僱。

+0

一定程度上取決於你在'ajax_caller'數據做什麼。也不清楚你爲什麼需要輸入元素上的點擊處理程序。根據顯示的有限代碼,問題似乎有些不成熟 – charlietfl

+0

我已更新我的問題以提供更多詳細信息。 –

+0

有很多插件的教程和樣板。應該可以通過幾個...也看現有插件的來源將是非常有益的 – charlietfl

回答

1

您需要將select回調作爲一個選項傳遞到你的插件,這樣的事情:

$.fn.custom_search = function(options) { 
    options = options || {}; 
    var select = options.select || function() {}; 
    $(this).on('keydown click', (e) function(){ 
    switch e.type { 
    case 'keydown': 
     ... 
     search_term = $(this).val(); 
     select($(this), search_term); 
     ... 
    } 

}; 

,然後你將它傳遞像jQuery的自動完成:

$('#search_input').custom_search({ 
    select: function(element, value) { 
    $('.some_element').val('ui.item.id'); 
    return false; 
    } 
}); 

還要檢查this jQuery plugin template ,你可以找到更多類似的模板來幫助你編寫一個結構良好的插件。