jQuery UI Multicolumn Autocomplete
Trying to make the autocomplete plugin work with multiple columns.
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/cupertino/jquery-ui.css">
<div style="margin:10px 10px;padding:8px;width:400px;" class="">
<SPAN id=lblStrategy_data>[{"ID":"2605527","Name":"Estratégia 1 (V1)","CriticalLevel":"Warm","Availability":"Básica","Description":"Descrição da primeira estratégia. (V1)"},{"ID":"2615661","Name":"Estratégia para a TaskForce","CriticalLevel":"Warm","Availability":"Contínua","Description":"task force strategy"},{"ID":"2616066","Name":"Estrategia teste","CriticalLevel":"Cold","Availability":"Básica","Description":"SAFD"},{"ID":"2616077","Name":"Estratégia Hot Stand By","CriticalLevel":"Hot Stand By","Availability":"Alta","Description":"Processos Hot Stand By"},{"ID":"2618452","Name":"21","CriticalLevel":"Cold","Availability":"Básica","Description":"1231"},{"ID":"2618889","Name":"Estratégia 1210 v2","CriticalLevel":"Hot","Availability":"Contínua","Description":"Desc"},{"ID":"2619407","Name":"dasdasd","CriticalLevel":"Hot Stand By","Availability":"Contínua","Description":"asdasda"},{"ID":"2619461","Name":"sadasdada","CriticalLevel":"Hot","Availability":"Contínua","Description":"asdasd"}]</SPAN>
<INPUT id=txtStrategyID value=0 type=text name=txtStrategyID>
<!-- This is the input control that gets turned into the jquery ui widget -->
<input id="searchStrategy" type="text" style="padding:2px;width:300px;"/>
<div style="margin:20px 0 0 0;">
<span id="results" style="color:#68a;"></span>
</div>
</div>
CSS
.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
JavaScript
/*
* jQuery UI Multicolumn Autocomplete Widget Plugin 1.0
* Copyright (c) 2012 Mark Harmon
*
* Depends:
* - jQuery UI Autocomplete widget
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100% height:200px"></div>');
$.each(this.options.columns, function (index, item) {
table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function (ul, item) {
var t = '',
result = '';
$.each(this.options.columns, function (index, column) {
t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
});
result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
return result;
}
});// Sets up the multicolumn autocomplete widget.
var autoCompleateDT = $("#lblStrategy_data").text() ;
// Sets up the multicolumn autocomplete widget.
$("#searchStrategy").mcautocomplete({
// These next two options are what this plugin adds to the autocomplete widget.
showHeader: true,
columns: [{
name: 'Nome',
...