Modifier le rendu HTML avec les fonctions natives _renderMenu and _renderItem
Source: Quick example of multi-column results with jQueryUI’s new Autocomplete?
I ended up manually overriding the _renderMenu and _renderItem functions after all. Works like a charm so far, and was actually very easy to do. I was hoping for a « per-instance » solution, but we’ll burn that bridge when we come to it. Here’s what it came to, and thanks again!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$.ui.autocomplete.prototype._renderMenu = function(ul, items) { var self = this; ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool Points</th></tr></thead><tbody></tbody></table>"); $.each( items, function( index, item ) { self._renderItem( ul.find("table tbody"), item ); }); }; $.ui.autocomplete.prototype._renderItem = function(table, item) { return $( "<tr></tr>" ) .data( "item.autocomplete", item ) .append( "<td>"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" ) .appendTo( table ); }; $("#search").autocomplete({ source: [ {id:1,value:"Thomas",cp:134}, {id:65,value:"Richard",cp:1743}, {id:235,value:"Harold",cp:7342}, {id:982,value:"Nina",cp:21843}, {id:724,value:"Pinta",cp:35}, {id:78,value:"Santa Maria",cp:787}], minLength: 1 }); |
Annuler les styles de .ui-menu pour .ui-autocomplete
Cette astuce fonctionne pour n’importe quel widget issu de jQuery UI.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.ui-autocomplete.ui-menu { .ui-menu-item { padding: 0; list-style-image: none; } .ui-menu-divider { margin: 0; border-width: 0; } .ui-state-focus, .ui-state-active { margin: 0; } } |
jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”
Source : jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”