autocompletado de múltiples columnas para jQuery?

Question

¿Existe un autocompletado AJAX para jQuery que admita múltiples columnas? Quiero decir columnas múltiples como una tabla de base de datos, no solo dividir una lista. Buscaría en la primera columna, pero el resto sería visible en el menú desplegable.

¿Existe tal cosa?

Answer 1

Sí. El común auto-complete plugin tiene eso - un vistazo a las "múltiples aves (a distancia)" caja, se busca la primera columna, pero muestra más datos:

function formatItem(row) { 
    return row[0] + " (<strong>id: " + row[1] + "</strong>)"; 
} 
function formatResult(row) { 
    return row[0].replace(/(<.+?>)/gi, ''); //removes html tags 
} 
$("#suggest4").autocomplete('search.php', { 
    width: 300, 
    multiple: true, 
    matchContains: true, 
    formatItem: formatItem, 
    formatResult: formatResult 
}); 

El resultado de search.php q = b es:?

 
Great <em>Bittern</em>|Botaurus stellaris 
Little Bittern|Ixobrychus minutus 
American Bittern|Botaurus lentiginosus 

Answer 2

try this code searching for one column but displaying multiple columns 
$(function() { 
    $(".tb").autocomplete 
      ({ 
       source: function(request, response) { 
        $.ajax({ 
         type: "POST", 
         url: "WebService_GetData.asmx/GetCmbPostaKod", 
         dataType: "json", 
         data: "{ 'filterKey': '" + request.term + "' }", 
         contentType: "application/json; charset=utf-8", 
         dataFilter: function(data) { return data; }, 
         success: function(data) { 
          response($.map(data.d, function(item) { 
          return { value: item.PostaKodu, label: item.IlAdi + ' ' + item.IlceAdi + ' ' + item.SemtAdi + ' ' + item.PostaKodu } 
          })) 
         }, 
         error: function(XMLHttpRequest, textStatus, errorThrown) { 
          alert(textStatus); 
         } 
        }); 
       }, 
       minLength: 2, 
       multiple: true, 
       matchContains: true, 
       formatItem: formatItem, 
       formatResult: formatResult 
      }); 
     }); 

     function formatItem(row) { 
      return row[0] + " (<strong>id: " + row[1] + "</strong>)"; 
     } 
     function formatResult(row) { 
      return row[0].replace(/(<.+?>)/gi, ''); //removes html tags 
     } 

Answer 3

Hola usar esta URL a continuación por una columna, pero que muestra varias columnas

http://jsfiddle.net/alforno/g4stL/

$("#search").mcautocomplete({ 
showHeader: true, 

columns: [{ 
    name: 'City', 
    width: '150px', 
    valueField: 'name' 
}, { 
    name: 'State', 
    width: '120px', 
    valueField: 'adminName1' 
}, { 
    name: 'Country', 
    width: '120px', 
    valueField: 'countryName' }], 
    select: function (event, ui) { 
    this.value = (ui.item ? ui.item.name : ''); 
    return false; 
    }, 



minLength: 1, 
source: function (request, response) { 
    $.ajax({ 
     url: 'http://ws.geonames.org/searchJSON', 
     dataType: 'jsonp', 
     data: { 
      featureClass: 'P', 
      style: 'full', 
      maxRows: 12, 
      name_startsWith: request.term, 
      username: "demo" 
     }, 
     // The success event handler will display "No match found" if no items are returned. 
     success: function (data) { 
      var result; 
      if (!data || data.length === 0 || !data.geonames || data.geonames.length === 0) { 
       result = [{ 
        label: 'No match found.' 
       }]; 
      } else { 
       result = data.geonames; 
      } 
      response(result); 
     } 
    }); 
} });