3 module( "autocomplete: options" );
5 var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ];
7 test( "appendTo", function() {
9 var detached = $( "<div>" ),
10 element = $( "#autocomplete" ).autocomplete();
11 equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" );
12 element.autocomplete( "destroy" );
14 element.autocomplete({
17 equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "first found element" );
18 equal( $( "#ac-wrap2 .ui-autocomplete" ).length, 0, "only appends to one element" );
19 element.autocomplete( "destroy" );
21 $( "#ac-wrap2" ).addClass( "ui-front" );
22 element.autocomplete();
23 equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "null, inside .ui-front" );
24 element.autocomplete( "destroy" );
25 $( "#ac-wrap2" ).removeClass( "ui-front" );
27 element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" );
28 equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" );
29 element.autocomplete( "destroy" );
31 element.autocomplete({
34 equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached jQuery object" );
35 element.autocomplete( "destroy" );
37 element.autocomplete({
40 equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached DOM element" );
41 element.autocomplete( "destroy" );
43 element.autocomplete().autocomplete( "option", "appendTo", detached );
44 equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
45 element.autocomplete( "destroy" );
48 function autoFocusTest( afValue, focusedLength ) {
49 var element = $( "#autocomplete" ).autocomplete({
54 equal( element.autocomplete( "widget" ).children( ".ui-menu-item:first" ).find( ".ui-state-focus" ).length,
55 focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" );
59 element.val( "ja" ).keydown();
63 test( "autoFocus: false", function() {
65 autoFocusTest( false, 0 );
68 test( "autoFocus: true", function() {
70 autoFocusTest( true, 1 );
73 asyncTest( "delay", function() {
75 var element = $( "#autocomplete" ).autocomplete({
79 menu = element.autocomplete( "widget" );
80 element.val( "ja" ).keydown();
82 ok( menu.is( ":hidden" ), "menu is closed immediately after search" );
84 setTimeout(function() {
85 ok( menu.is( ":visible" ), "menu is open after delay" );
90 asyncTest( "disabled", function() {
92 var element = $( "#autocomplete" ).autocomplete({
97 menu = element.autocomplete( "widget" );
98 element.val( "ja" ).keydown();
100 ok( menu.is( ":hidden" ) );
102 setTimeout(function() {
103 ok( menu.is( ":hidden" ) );
108 test( "minLength", function() {
110 var element = $( "#autocomplete" ).autocomplete({
113 menu = element.autocomplete( "widget" );
114 element.autocomplete( "search", "" );
115 ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" );
117 element.autocomplete( "option", "minLength", 0 );
118 element.autocomplete( "search", "" );
119 ok( menu.is( ":visible" ), "blank enough for minLength: 0" );
122 asyncTest( "minLength, exceed then drop below", function() {
124 var element = $( "#autocomplete" ).autocomplete({
126 source: function( req, res ) {
127 equal( req.term, "12", "correct search term" );
128 setTimeout(function() {
133 menu = element.autocomplete( "widget" );
135 ok( menu.is( ":hidden" ), "menu is hidden before first search" );
136 element.autocomplete( "search", "12" );
138 ok( menu.is( ":hidden" ), "menu is hidden before second search" );
139 element.autocomplete( "search", "1" );
141 setTimeout(function() {
142 ok( menu.is( ":hidden" ), "menu is hidden after searches" );
147 test( "minLength, exceed then drop below then exceed", function() {
150 element = $( "#autocomplete" ).autocomplete({
152 source: function( req, res ) {
156 menu = element.autocomplete( "widget" );
158 // trigger a valid search
159 ok( menu.is( ":hidden" ), "menu is hidden before first search" );
160 element.autocomplete( "search", "12" );
162 // trigger a search below the minLength, to turn on cancelSearch flag
163 ok( menu.is( ":hidden" ), "menu is hidden before second search" );
164 element.autocomplete( "search", "1" );
166 // trigger a valid search
167 element.autocomplete( "search", "13" );
168 // react as if the first search was cancelled (default ajax behavior)
170 // react to second search
173 ok( menu.is( ":visible" ), "menu is visible after searches" );
176 test( "source, local string array", function() {
178 var element = $( "#autocomplete" ).autocomplete({
181 menu = element.autocomplete( "widget" );
182 element.val( "ja" ).autocomplete( "search" );
183 equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
186 function sourceTest( source, async ) {
187 var element = $( "#autocomplete" ).autocomplete({
190 menu = element.autocomplete( "widget" );
192 equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
193 element.autocomplete( "destroy" );
200 $( document ).one( "ajaxStop", result );
202 element.val( "ja" ).autocomplete( "search" );
208 test( "source, local object array, only label property", function() {
213 { label: "coldfusion" },
214 { label: "javascript" }
218 test( "source, local object array, only value property", function() {
223 { value: "coldfusion" },
224 { value: "javascript" }
228 test( "source, url string with remote json string array", function() {
230 sourceTest( "remote_string_array.txt", true );
233 test( "source, url string with remote json object array, only value properties", function() {
235 sourceTest( "remote_object_array_values.txt", true );
238 test( "source, url string with remote json object array, only label properties", function() {
240 sourceTest( "remote_object_array_labels.txt", true );
243 test( "source, custom", function() {
245 sourceTest(function( request, response ) {
246 equal( request.term, "ja" );
247 response( ["java", "javascript"] );
251 test( "source, update after init", function() {
253 var element = $( "#autocomplete" ).autocomplete({
254 source: [ "java", "javascript", "haskell" ]
256 menu = element.autocomplete( "widget" );
257 element.val( "ja" ).autocomplete( "search" );
258 equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
259 element.autocomplete( "option", "source", [ "php", "asp" ] );
260 element.val( "ph" ).autocomplete( "search" );
261 equal( menu.find( ".ui-menu-item" ).text(), "php" );