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);
You can't call that function without changing the plugin to expose the function as a visible API.
精彩评论