combobox

имеется прекрасное дополнение autocomplite
combobox
а именно

Код (Text):

1.  
2.  (function( $ ) {
3. $.widget( "custom.combobox", {
4. _create: function() {
5. this.wrapper = $( "<span>" )
6. .addClass( "custom-combobox" )
7. .insertAfter( this.element );
8. this.element.hide();
9. this._createAutocomplete();
10. this._createShowAllButton();
11. },
12. _createAutocomplete: function() {
13. var selected = this.element.children( ":selected" ),
14. value = selected.val() ? selected.text() : "";
15. this.input = $( "<input>" )
16. .appendTo( this.wrapper )
17. .val( value )
18. .attr( "title", "" )
19. .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
20. .autocomplete({
21. delay: 0,
22. minLength: 0,
23. source: $.proxy( this, "_source" )
24. })
25. .tooltip({
26. tooltipClass: "ui-state-highlight"
27. });
28. this._on( this.input, {
29. autocompleteselect: function( event, ui ) {
30. ui.item.option.selected = true;
31. this._trigger( "select", event, {
32. item: ui.item.option
33. });
34. },
35. autocompletechange: "_removeIfInvalid"
36. });
37. },
38. _createShowAllButton: function() {
39. var input = this.input,
40. wasOpen = false;
41. $( "<a>" )
42. .attr( "tabIndex", -1 )
43. .attr( "title", "Show All Items" )
44. .tooltip()
45. .appendTo( this.wrapper )
46. .button({
47. icons: {
48. primary: "ui-icon-triangle-1-s"
49. },
50. text: false
51. })
52. .removeClass( "ui-corner-all" )
53. .addClass( "custom-combobox-toggle ui-corner-right" )
54. .mousedown(function() {
55. wasOpen = input.autocomplete( "widget" ).is( ":visible" );
56. })
57. .click(function() {
58. input.focus();
59. // Close if already visible
60. if ( wasOpen ) {
61. return;
62. }
63. // Pass empty string as value to search for, displaying all results
64. input.autocomplete( "search", "" );
65. });
66. },
67. _source: function( request, response ) {
68. var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
69. response( this.element.children( "option" ).map(function() {
70. var text = $( this ).text();
71. if ( this.value && ( !request.term || matcher.test(text) ) )
72. return {
73. label: text,
74. value: text,
75. option: this
76. };
77. }) );
78. },
79. _removeIfInvalid: function( event, ui ) {
80. // Selected an item, nothing to do
81. if ( ui.item ) {
82. return;
83. }
84. // Search for a match (case-insensitive)
85. var value = this.input.val(),
86. valueLowerCase = value.toLowerCase(),
87. valid = false;
88. this.element.children( "option" ).each(function() {
89. if ( $( this ).text().toLowerCase() === valueLowerCase ) {
90. this.selected = valid = true;
91. return false;
92. }
93. });
94. // Found a match, nothing to do
95. if ( valid ) {
96. return;
97. }
98. // Remove invalid value
99. this.input
100. .val( "" )
101. .attr( "title", value + " didn't match any item" )
102. .tooltip( "open" );
103. this.element.val( "" );
104. this._delay(function() {
105. this.input.tooltip( "close" ).attr( "title", "" );
106. }, 2500 );
107. this.input.data( "ui-autocomplete" ).term = "";
108. },
109. _destroy: function() {
110. this.wrapper.remove();
111. this.element.show();
112. }
113. });
114. })( jQuery );

так вот если работать с сервером то я пишу вот так чтобы загрузить данные

Код (Text):

1. $.getJSON( "file.php?data=pr_dok",  function(data){
2. $('#pr_dok').autocomplete({ source: data});
3. });

но беда в том что combobox не хочет воспринимать source: data
как можно заставить его работать ?

 

вы не поняли .. Autocomplite чистый у меня прекрасно работает ..
но когда я пытаюсь использовать дополнительный виджет combobox я не могу в combobox прокинуть data сейчас боевой пример дам

 

уф наконец то минутку дали .. вот что я имел ввиду

http://jsfiddle.net/CKr6k/

Код (Text):

1.  
2.     $("#autocomplite").autocomplete({
3.         source: ['hello', 'world']
4.     });
5.    
6.     $("#combo").combobox({
7.         source: ['hello', 'world']
8.     });  

как переделать виджет ?

 

ок.. как в этот скрытый селект загнать source:data ?
а если честно он тут не при чем ..
в предыдуших версиях народ дописывал .. но сейчас обновили версию
http://jsfiddle.net/4extL/45/
и то что там работало .. сейчас глючит (( да и сейчас сам виджет немного более функционален стал

 

пока наковырял что если изменить вот так

Код (Text):

1.  
2. .autocomplete({
3. delay: 0,
4. minLength: 0,
5. source: $.proxy( this, "_source" )
6. },this.options )

то данные загружаются .. но при выборе нужного пункта - возникает ошибка, забороть которую мне пока не удалось ..

 

виджет допилен - пользуйтесь на здоровье

Код (Text):

1.  
2. (function( $ ) {
3.         $.widget( "custom.combobox", {
4.             _create: function() {
5.                 this.wrapper = $( "<span>" )
6.                     .addClass( "custom-combobox" )
7.                     .insertAfter( this.element );
8.  
9.                 this.element.hide();
10.                 this._createAutocomplete();
11.                 this._createShowAllButton();
12.             },
13.  
14.             _createAutocomplete: function() {
15.                 var selected = this.element.children( ":selected" ),
16.                     value = selected.val() ? selected.text() : "";
17.                                        
18.  
19.                 this.input = $( "<input>" )
20.                     .appendTo( this.wrapper )
21.                     .val( value )
22.                     .attr( "title", "" )
23.                     .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
24.                     .autocomplete({
25.                         delay: 0,
26.                         minLength: 0,
27.                         source : $.proxy( this, "_source" )
28.                     },this.options)  
29.                     .tooltip({
30.                         tooltipClass: "ui-state-highlight"
31.                     });
32.  
33.                 this._on( this.input, {
34.                     autocompleteselect: function( event, ui ) {
35.  
36.                                          
37.                                             if (ui.item.option !== undefined) {
38.                         ui.item.option.selected = true;
39.                                                
40.                         this._trigger( "select", event, {
41.                             item: ui.item.option
42.                         });
43.                                             }
44.                                             else {
45.  
46.                                                 this.element.val( ui.item.id );
47.                                             }
48.                
49.                     },
50.  
51.                     autocompletechange: "_removeIfInvalid"
52.                 });
53.             },
54.  
55.             _createShowAllButton: function() {
56.                 var input = this.input,
57.                     wasOpen = false;
58.  
59.                 $( "<a>" )
60.                     .attr( "tabIndex", -1 )
61.                     .attr( "title", "Показать все" )
62.                     .tooltip()
63.                     .appendTo( this.wrapper )
64.                     .button({
65.                         icons: {
66.                             primary: "ui-icon-triangle-1-s"
67.                         },
68.                         text: false
69.                     })
70.                     .removeClass( "ui-corner-all" )
71.                     .addClass( "custom-combobox-toggle ui-corner-right" )
72.                     .mousedown(function() {
73.                         wasOpen = input.autocomplete( "widget" ).is( ":visible" );
74.                     })
75.                     .click(function() {
76.                         input.focus();
77.  
78.                         // Close if already visible
79.                         if ( wasOpen ) {
80.                             return;
81.                         }
82.  
83.                         // Pass empty string as value to search for, displaying all results
84.                         input.autocomplete( "search", "" );
85.                     });
86.             },
87.  
88.             _source: function( request, response ) {
89.                              
90.                                            
91.                 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
92.                 response( this.element.children( "option" ).map(function() {
93.                     var text = $( this ).text();
94.                     if ( this.value && ( !request.term || matcher.test(text) ) )
95.                         return {
96.                             label: text,
97.                             value: text,
98.                             option: this
99.                         };
100.                 }) );
101.             },
102.  
103.             _removeIfInvalid: function( event, ui ) {
104.  
105.                 // Selected an item, nothing to do
106.                 if ( ui.item ) {
107.                                      
108.                     return;
109.                 }
110.  
111.                 // Search for a match (case-insensitive)
112.                 var value = this.input.val(),
113.                     valueLowerCase = value.toLowerCase(),
114.                     valid = false;
115.                                         ids="";
116.  
117.                              if  (this.options.source !== undefined){
118.                                 $.each(this.options.source,function(){
119.  
120.                                     if ( this.value.toLowerCase() === valueLowerCase ) {
121.                                         valid = true;
122.                                         ids = this.id;
123.                                         return false;
124.                     }                                    
125.                                    
126.                                 });
127.                             }
128.                             else {    
129.                 this.element.children( "option" ).each(function() {
130.                                     if ( $( this ).text().toLowerCase() === valueLowerCase ) {
131.                                         this.selected = valid = true;
132.                                  
133.                                         return false;
134.                                                
135.                     }
136.                 });
137.                             }
138.                 // Found a match, nothing to do
139.                 if ( valid ) {
140.                              if (ids!==""){this.element.val(ids);}
141.                     return;
142.                 }
143.  
144.                 // Remove invalid value
145.                 this.input
146.                     .val( "" )
147.                     .attr( "title", value + " Совпадение не найдено" )
148.                     .tooltip( "open" );
149.                 this.element.val( "" );
150.                 this._delay(function() {
151.                     this.input.tooltip( "close" ).attr( "title", "" );
152.                 }, 2500 );
153.                 this.input.data( "ui-autocomplete" ).term = "";
154.             },
155.  
156.             _destroy: function() {
157.                 this.wrapper.remove();
158.                 this.element.show();
159.             }
160.         });
161.     })( jQuery );

возможно остались какие то недопилки - ищите и говорите.

использование :

Код (Text):

1.  
2. <input type="text" id="test" name="test" />
3. $.getJSON( "file.php",  function(data){
4. $( "#test" ).combobox({source:data});
5. });

также возможно и использование как и задумано разрабами - т.е. статически