Still trying to figure out jQuery. I’m using the Autocomplete widget with the combobox. I have a requirement to have the drop-down list show on page load and when another combobox gets selected. So, I’m trying to add the Autocomplete search method on the combobox code and I don’t know how. What I’ve tried isn’t working. Here is the last thing I’ve tried. You’ll see I’ve added the search function at the bottom. thanks for the help.<\/p>\n
I’m getting this error right now:<\/p>\n
\nUncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method ‘search’<\/p>\n<\/blockquote>\n
Here is my calling code:<\/p>\n
$(\"select\").combobox();\n$(\"select\").combobox(\"search\",\"\");\n<\/code><\/pre>\nHere is my widget code:<\/p>\n
(function( $ ) {\n$.widget( \"ui.combobox\", {\n _create: function() {\n var self = this;\n var select = this.element.hide(),\n selected = select.children( \":selected\" ),\n value = selected.val() ? selected.text() : \"\";\n var input = $( \"\" )\n .insertAfter(select)\n .val( value )\n .autocomplete({\n delay: 0,\n minLength: 0,\n source: function(request, response) {\n var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), \"i\" );\n response( select.children(\"option\" ).map(function() {\n var text = $( this ).text();\n if ( this.value && ( !request.term || matcher.test(text) ) )\n return {\n label: text.replace(\n new RegExp(\n \"(?![^&]+;)(?!)(?![^&]+;)\", \"gi\"),\n \"$1<\/strong>\"),\n value: text,\n option: this\n };\n }) );\n },\n select: function( event, ui ) {\n ui.item.option.selected = true;\n self._trigger( \"selected\", event, {\n item: ui.item.option\n });\n },\n change: function(event, ui) {\n if ( !ui.item ) {\n var matcher = new RegExp( \"^\" + $.ui.autocomplete.escapeRegex( $(this).val() ) + \"$\", \"i\" ),\n valid = false;\n select.children( \"option\" ).each(function() {\n if ( this.value.match( matcher ) ) {\n this.selected = valid = true;\n return false;\n }\n });\n if ( !valid ) {\n \/\/ remove invalid value, as it didn't match anything\n $( this ).val( \"\" );\n select.val( \"\" );\n return false;\n }\n }\n }\n })\n .addClass(\"ui-widget ui-widget-content ui-corner-left\");\n\n input.data( \"ui-autocomplete\" )._renderItem = function( ul, item ) {\n return $( \"<\/code><\/pre>\n\" )\n .data( \"ui-autocomplete-item\", item )\n .append( \"\" + item.label + \"\" )\n .appendTo( ul );\n };\n\n $( \" \" )\n .attr( \"tabIndex\", -1 )\n .attr( \"title\", \"Show All Items\" )\n .insertAfter( input )\n .button({\n icons: {\n primary: \"ui-icon-triangle-1-s\"\n },\n text: false\n })\n .removeClass( \"ui-corner-all\" )\n .addClass( \"ui-corner-right ui-button-icon\" )\n .click(function() {\n \/\/ close if already visible\n if (input.autocomplete(\"widget\").is(\":visible\")) {\n input.autocomplete(\"close\");\n return;\n }\n \/\/ pass empty string as value to search for, displaying all results\n input.autocomplete(\"search\", \"\");\n input.focus();\n });\n },\n search: function(value) {\n this.element.autocomplete(\"search\", value);\n this.element.focus();\n },\n destroy: function() {\n this.input.remove();\n this.button.remove();\n this.element.show();\n $.Widget.prototype.destroy.call( this );\n }\n});\n})( jQuery );\n<\/pre>\n\n
- \n
It is because yoursearch<\/code> method is trying to useautocomplete<\/code> on theselect<\/code> element whereautocomplete<\/code> is not used instead of the dynamically addedinput<\/code> element<\/code><\/p>\n(function($) {\n $.widget(\"ui.combobox\", {\n _create : function() {\n var self = this;\n var select = this.element.hide(), selected = select\n .children(\":selected\"), value = selected.val() ? selected\n .text() : \"\";\n var input = $(\"\").insertAfter(select).val(value)\n .autocomplete({\n delay : 0,\n minLength : 0,\n source : function(request, response) {\n var matcher = new RegExp($.ui.autocomplete\n .escapeRegex(request.term), \"i\");\n response(select.children(\"option\").map(function() {\n var text = $(this).text();\n if (this.value\n && (!request.term || matcher.test(text)))\n return {\n label : text\n .replace(\n new RegExp(\n \"(?![^&]+;)(?!)(?![^&]+;)\",\n \"gi\"),\n \"$1<\/strong>\"),\n value : text,\n option : this\n };\n }));\n },\n select : function(event, ui) {\n ui.item.option.selected = true;\n self._trigger(\"selected\", event, {\n item : ui.item.option\n });\n },\n change : function(event, ui) {\n if (!ui.item) {\n var matcher = new RegExp(\"^\"\n + $.ui.autocomplete\n .escapeRegex($(this)\n .val()) + \"$\",\n \"i\"), valid = false;\n select.children(\"option\").each(function() {\n if (this.value.match(matcher)) {\n this.selected = valid = true;\n return false;\n }\n });\n if (!valid) {\n \/\/ remove invalid value, as it didn't match\n \/\/ anything\n $(this).val(\"\");\n select.val(\"\");\n return false;\n }\n }\n }\n }).addClass(\"ui-widget ui-widget-content ui-corner-left\");\n\n this.input = input;\n input.data(\"ui-autocomplete\")._renderItem = function(ul, item) {\n return $(\"<\/code><\/pre>\n\").data(\"ui-autocomplete-item\", item)\n .append(\"\" + item.label + \"\").appendTo(ul);\n };\n\n $(\" \").attr(\"tabIndex\", -1).attr(\"title\",\n \"Show All Items\").insertAfter(input).button({\n icons : {\n primary : \"ui-icon-triangle-1-s\"\n },\n text : false\n }).removeClass(\"ui-corner-all\")\n .addClass(\"ui-corner-right ui-button-icon\").click(\n function() {\n \/\/ close if already visible\n if (input.autocomplete(\"widget\").is(\":visible\")) {\n input.autocomplete(\"close\");\n return;\n }\n \/\/ pass empty string as value to search for,\n \/\/ displaying all results\n input.autocomplete(\"search\", \"\");\n input.focus();\n });\n },\n search : function(value) {\n this.input.autocomplete(\"search\", value);\n this.input.focus();\n },\n destroy : function() {\n this.input.remove();\n this.button.remove();\n this.element.show();\n $.Widget.prototype.destroy.call(this);\n }\n });\n})(jQuery);\n\n$(\"select\").combobox();\n$(\"select\").combobox(\"search\",\"\");\n<\/pre>\n
Demo: Fiddle<\/code><\/p>\n<\/li>\n<\/ol>\nOriginally posted 2013-12-02 20:56:16. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
Still trying to figure out jQuery. I’m using the Autocomplete widget with the combobox. I have a requirement to have the drop-down list show on page load and when another combobox gets selected. So, I’m trying to add the Autocomplete search method on the combobox code and I don’t know how. What I’ve tried isn’t […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1827","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1827"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1827\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}