2011-05-19 50 views
0

我使用這個jsbin找到的代碼:http://jsbin.com/asahe5/10/edit如何調用JavaScript類中的函數(jQuery的,jSuggest)

有該類叫的addItem,增加了自動提示的項目內的功能到頁面。但是,例如,通過單擊按鈕,沒有內置API來添加內容。

我曾嘗試以下,但它不工作(遺漏的類型錯誤:對象的翻譯:有沒有方法「的addItem」):

var test = $("#test").jSuggest({ 
    source: 'http://example.com/page.php', 
    minChars: 1, 
    keyDelay: 200, 
    selectedItemProp: 'name', 
    seekVal: 'name', 
    startText: 'Enter a country', 
    newItem: false, 
    newText: 'Please select a country from the list.', 
    selectionAdded: function(elem, data){ add_country(data.value); }, 
    selectionRemoved: function(elem, data){ elem.fadeTo("fast", 0, function(){ elem.remove(); rem_country(data.value); }); } 
}); 

function add_item(object, id) { 
    test.addItem(object, id); 
} 

插件的最相關的部分:

(function($){ 

    $.fn.jSuggest = function(options) { 
    var defaults = { 
     source: {}, // Object or URL where jSuggest gets the suggestions from. 
     uniqID: false, 
     startText: 'Enter a Value', // Text to display when the jSuggest input field is empty. 
     emptyText: 'No Results Found', // Text to display when their are no search results. 
     preFill: {}, // Object from which you automatically add items when the page is first loaded. 
     limitText: 'No More Values Are Allowed', // Text to display when the number of selections has reached it's limit. 
     newItem: false, // If set to false, the user will not be able to add new items by any other way than by selecting from the suggestions list. 
     newText: 'Adding New Values Is Not Allowed', // Text to display when the user tries to enter a new item by typing. 
     selectedItemProp: 'value', // Value displayed on the added item 
     selectProp: 'value', // Name of object property added to the hidden input. 
     seekVal: 'value', // Comma separated list of object property names. 
     queryParam: 'q', // The name of the param that will hold the search string value in the AJAX request. 
     queryLimit: false, // Number for 'limit' param on ajax request. 
     extraParams: '', // This will be added onto the end of the AJAX request URL. Make sure you add an '&' before each param. 
     matchCase: false, // Make the search case sensitive when set to true. 
     minChars: 1, // Minimum number of characters that must be entered before the search begins. 
     keyDelay: 400, // The delay after a keydown on the jSuggest input field and before search is started. 
     resultsHighlight: true, // Option to choose whether or not to highlight the matched text in each result item. 
     selectionLimit: false, // Limits the number of selections that are allowed. 
     showResultList: true, // If set to false, the Results Dropdown List will never be shown at any time. 
     selectionClick: function(elem){}, // Custom function that is run when a previously chosen item is clicked. 
     selectionAdded: function(elem, data){}, // Custom function that is run when an item is added to the items holder. 
     selectionRemoved: function(elem, data){ elem.remove(); }, // Custom function that is run when an item is removed from the items holder. 
     spotFirst: true, // Option that spots the first suggestions on the results list if true. 
     formatList: false, // Custom function that is run after all the data has been retrieved and before the results are put into the suggestion results list. 
     beforeRetrieve: function(string){ return string; }, // Custom function that is run before the AJAX request is made, or the local objected is searched. 
     retrieveComplete: function(data){ return data; }, 
     resultClick: function(data){}, // Custom function that is run when a search result item is clicked. 
     resultsComplete: function(){} // Custom function that is run when the suggestion results dropdown list is made visible. 
    }; 

    // Merge the options passed with the defaults. 
    var opts = $.extend(defaults, options);  

    // Get the data type of the source. 
    var dType = typeof opts.source; 

..................................... 

     function addItem(data, num) { 

      // Add to the hidden input the seleced values property from the passed data. 
      hiddenInput.val(hiddenInput.val()+data[opts.selectProp]+','); 

      // If a selected item is clicked, add the selected class and call the custom selectionClick function. 
      var item = $('<li class="as-selection-item" id="as-selection-'+num+'"></li>').click(function() { 

      opts.selectionClick.call(this, $(this)); 
      itemsHolder.children().removeClass('selected'); 
      $(this).addClass('selected'); 

      }); 

      // If the close cross is clicked, 
      var close = $('<a class="as-close">x</a>').click(function() { 

      // Remove the item from the hidden input. 
      hiddenInput.val(hiddenInput.val().replace(data[opts.selectProp]+',','')); 

      // Call the custom selectionRemoved function. 
      opts.selectionRemoved.call(this, item, data); 
      input.focus(); 
      return false; 

      }); 

      // Insert the item with the selectedItemProp as text and the close cross. 
      orgLI.before(item.html(data[opts.selectedItemProp]).prepend(close)); 

      // Call the custom selectionAdded function with the recently added item as elem and its associated data. 
      opts.selectionAdded.call(this, orgLI.prev(), data); 

     } 

..................................... 

     }); 

    } 

    }; 

})(jQuery); 

回答

1

你不能調用功能不改變插件揭露功能可見API。

+0

我怎麼會去這樣做呢?這是我第一次使用jQuery,所以我仍然試圖掌握一些這些東西(並且我從未使用過Javascript類)。 – 2011-05-19 17:25:01

+0

那麼首先要弄清楚這個函數到底做了什麼,以及它期望它的參數是什麼樣的。事實上,插件沒有(顯然)公開該功能可能表明,它使用時有點棘手,而無法訪問插件內部的上下文。一旦你知道了,你只需要弄清楚如何以某種方式公開它,這將取決於該插件的細節(我並不熟悉它)。 – Pointy 2011-05-19 17:38:46

+0

請注意,你完全自由地作出這樣的修改,但這樣做你(潛在的)爲自己設定了未來的維修工作時更新和修訂版本可用的插件。 – Pointy 2011-05-19 17:39:29

相關問題