Autocomplete Combobox search method not working
I have the following jQuery UI Combobox. When I click on the "show all" button, it searches for the value in the input box, instead of displaying all items. The line
input.autocomplete("search", "") is supposed to display all items. However, it seems to ignore it. Any help would be greatly appreciated.
- (function($) {
- $.widget("custom.combobox", {
- _create: function() {
- this.wrapper = $("<span>")
- .addClass("custom-combobox")
- .insertAfter(this.element);
-
- this.element.hide();
- this._createAutocomplete();
- this._createShowAllButton();
-
- this.input.data("ui-autocomplete")._renderItem = function(ul, item) {
- return $("<li></li>")
- .data("ui-autocomplete-item", item)
- .append('<a id="plan_' + item.id + '">' + item.label + '</a>')
- .appendTo(ul);
- }
- },
-
- _createAutocomplete: function() {
- var selected = this.element.children(":selected");
- var value = selected.val() ? $.trim(selected.text()) : "";
- var cache = {};
- var term = "";
-
- this.input = $('<input id="plan_id" name="plan_id">')
- .appendTo(this.wrapper)
- .val(value)
- .attr("title", "")
- .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
- .autocomplete({
- delay: 250,
- minLength: 0,
- source: function(request, response) {
- var term = request.term;
-
- if (term in cache) {
- response(cache[term])
- return;
- }
- $.ajax({
- url: "get_plans.cfm",
- data: {
- time: new Date().getTime(),
- term: $("#plan_id").val()
- },
- dataType: "json",
- success: function(data) {
- cache[term] = $.map(data.info, function(item) {
- return {
- label: item.label,
- value: item.clean,
- id: item.value
- }
- })
- response($.map(data.info, function(item) {
- return {
- label: item.label,
- value: item.clean,
- id: item.value
- }
- }));
- }
- });
- }
- })
- .tooltip({ tooltipClass: "ui-state-highlight" })
-
- this._on(this.input, {
- autocompleteselect: function(event, ui) {
- ui.item.value = $.trim(ui.item.value);
- },
- autocompletechange: "_removeIfInvalid"
- });
- },
-
- _createShowAllButton: function() {
- var input = this.input;
- var wasOpen = false;
-
- $("<a>")
- .attr("tabIndex", -1)
- .appendTo(this.wrapper)
- .button({
- icons: { primary: "ui-icon-triangle-1-s" },
- text: false
- })
- .removeClass("ui-corner-all")
- .addClass("ui-corner-right ui-button-icon")
- .mousedown(function() { wasOpen = input.autocomplete("widget").is(":visible"); })
- .click(function() {
- if (wasOpen) {
- return;
- }
-
- $(this).blur();
- input.autocomplete("search");
- input.focus();
- })
- },
-
- _source: function(request, response) {
- var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
-
- response(this.element.children("option").map(function() {
- var text = $(this).text();
-
- if (this.value && (! request.term || matcher.test(text))) {
- return {
- label: text,
- value: text,
- option: this
- };
- }
- }));
- },
-
- _removeIfInvalid: function( event, ui ) {
- if (ui.item) {
- return;
- }
-
- var value = this.input.val();
- var valueLowerCase = value.toLowerCase();
- var valid = false;
-
- this.element.children("option").each(function() {
- if ($(this).text().toLowerCase() === valueLowerCase ) {
- this.selected = valid = true;
- return false;
- }
- });
-
- if (valid) {
- return;
- }
-
- this.input.val("").tooltip("open");
- this.element.val("");
- this._delay(function() { this.input.tooltip("close").attr("title", ""); }, 2500);
- this.input.autocomplete("instance").term = "";
- },
-
- _destroy: function() {
- this.wrapper.remove();
- this.element.show();
- }
- })
- })(jQuery);