Question

I’m using the code found in this jsbin: http://jsbin.com/asahe5/10/edit

There is a function within that class called addItem, which adds an auto-suggested item to the page. However, there is no API built in to add something by clicking on a button for example.

I have tried the following, but it doesn’t work (Uncaught TypeError: Object [object Object] has no method ‘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);
}

The most relevant part of the plugin:

(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);

Answer 1

You can’t call that function without changing the plugin to expose the function as a visible API.