Ejemplo rápido de resultados de varias columnas con el nuevo Autocompletar de jQueryUI?

Question

Acabo de descubrir que el jQueryUI now has it's own built-in auto-complete combo box. ¡Una gran noticia!

Lamentablemente, lo siguiente que encontré es que hacerlo de varias columnas no parece tan sencillo (al menos a través de la documentación).

Hay un post here donde alguien menciona que lo han hecho (e incluso da el código), pero estoy teniendo problemas para entender lo que algunos de sus códigos están haciendo.

Tengo curiosidad por si alguien ha encontrado esto antes y podría publicar una muestra rápida y fácil de hacer un conjunto de resultados de varias columnas.

Muchas gracias de antemano.

Answer 1

que terminaron el mando manual sobre la _renderMenu y _renderItem funciones después de todo. Funciona como un encanto hasta el momento, y en realidad fue muy fácil de hacer. Esperaba una solución "por instancia", pero quemaremos ese puente cuando lleguemos a él. ¡Esto es lo que sucedió, y gracias de nuevo!

$.ui.autocomplete.prototype._renderMenu = function(ul, items) { 
    var self = this; 
    ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;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 
}); 

Answer 2

La publicación a la que hace referencia utiliza una devolución de llamada para la fuente en lugar de una url. La parte importante de esto es la devolución de llamada de éxito en la función ajax. Toma la respuesta del servidor y la asigna a un objeto que la autocompleta espera recibir: {label: '', value: ''}. En ese ejemplo, están configurando la etiqueta (que se muestra en el menú) al html que desean mostrar.

Si mira la fuente de autocompletar, _renderItem maneja la representación real de cada elemento, cada etiqueta está envuelta por un <a> y luego se agrega a un elemento <li>.

Si lo que desea hacer no se puede manejar estableciendo la etiqueta del elemento en el html que desee mostrar, puede intentar y parchear como se describe en here.

Publique algo de su código y podría ser capaz de ayudar con un ejemplo más concreto.

Answer 3

también se podría ampliar el widget Autocompletar y crear uno personalizado, de manera muy similar a lo que está haciendo. A continuación se muestra de cómo mostrar un panel flotante con 3 columnas con una mesa y 3 listas desordenadas:

$.widget("custom.threecolumnautocomplete", $.ui.autocomplete, { 

      //going to extend the AutoComplete widget by customizing renderMenu and renderItems 
      _renderMenu: function (ul, items) { 
       var self = this; 
       //we'll define a table structure with 3 columns, and use UL elements to shove items into. 
       ul.append("<table class='customautocomplete' cellpadding='5'>\ 
          <thead><tr>\ 
           <th>Products</th>\ 
           <th class='border'>Accessories</th>\ 
           <th class='border'>Categories</th>\ 
          </tr></thead>\ 
          <tbody><tr>\ 
           <td><ul class='products'></ul></td>\ 
           <td class='border'><ul class='accessories'></ul></td>\ 
           <td class='border'><ul class='categories'></ul></td>\ 
          </tr></tbody>\ 
         </table>"); 

       $.each(items, function (index, item) { 
        self._renderItem(ul.find("table tbody"), item); 
       }); 
      }, 

      _renderItem: function (table, item) { 

       if (item.category.toLowerCase() == "product") { 
        return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a href='ProductDetails.aspx?Id=" + item.value + "'>" + item.label + "</a>") // need the actual URL for a product details page 
       .appendTo(table.find("ul.products")); 
       } 

       if (item.category.toLowerCase() == "accessory") { 
        return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a href='ProductDetails.aspx?Id=" + item.value + "'>" + item.label + "</a>") // need the actual URL for a product details page 
       .appendTo(table.find("ul.accessories")); 
       } 

       if (item.category.toLowerCase() == "category") { 
        return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a href='ProductSearch.aspx?q=" + item.value + "'>" + item.label + "</a>") // need the actual URL for a product search page 
       .appendTo(table.find("ul.categories")); 
       } 

       // default if a category was not matched, just append a row to the containing table 
       return $("<tr></tr>") 
       .data("item.autocomplete", item) 
       .append("<td colspan='3'>" + item.label + "</td>") 
       .appendTo(table); 
      } 
     }); 

    $(function() { 
     $("#tbSearchBox").threecolumnautocomplete({ 
      . 
      . 
      . 

Answer 4

logré obtener la funcionalidad menú completo trabajo con un diseño de tabla, incluyendo la selección, destacando etc. He encontrado que es imposible usar <table><tr><td> con autocompletar, pero puede poner <div> dentro de los elementos de autocompletar y usar display: table-cell en CSS. Esto funciona desde IE8 en adelante y todos los principales navegadores modernos.

$.widget("custom.threecolumnautocomplete", $.ui.autocomplete, 
    { 
     _renderMenu: function(ul, items) 
     { 
      ul.addClass("threecolumnautocomplete"); 
      return this._super(ul, items); 
     }, 

     _renderItem: function (ul, item) 
     { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a><div class='col'>" + item.id + "</div><div class='col'>" + item.value + "</div><div class='col'>" + item.cp + "</div></a>") 
       .appendTo(ul); 
     } 
    }); 

y luego definir CSS como esto:

.threecolumnautocomplete li { display: table-row-group; } 

.threecolumnautocomplete a { display: table-row !important; } 

.threecolumnautocomplete .col { display: table-cell; } 

.ie7 .threecolumnautocomplete .col { display: block; float: left; width: 15em; overflow: hidden; white-space: nowrap; } 

Esto también muestra una anulación básico con columnas de ancho fijo que funciona en IE7. Para usar esto, agregue la clase ie7 más arriba en el documento, p. en el elemento body.

Answer 5

Sé que esto es un viejo hilo, pero this widget supports multi column autocomplete

Here is a demo page usando autocompletar columna de múltiples

El código siguiente muestra cómo crear un multi entrada de la columna de autocompletar:

$('input#starttime').menuoptions({ 
            "Data": $("body").data("alltimes"), 

            "ClearBtn": true, 
            "onSelect": function(e, data) { 
             ResetEndTimeData(data.newVal); 
            }, 
            "ColumnCount": 4, 
            "Width": 300, 
            "Height": 200, 
            "Sort": [] 
            }); 

Answer 6

Gracias a Lance para poner yo en el camino correcto. Esta respuesta es seleccionable y funciona en jquery-ui-1.11.4.

$.ui.autocomplete.prototype._renderMenu = function (ul, items) { 
    var self = this; 
    ul.append("<li class='ui-autocomplete-category' aria-label='header'><div class='listFullName listHeader'>Name</div><div class='listEmployeeID listHeader'>Employee ID</div><div class='listJobTitle listHeader'>Job Title</div></li>"); 
    $.each(items, function (index, item) { 
     self._renderItemData(ul, item); 
    }); 
}; 

$.ui.autocomplete.prototype._renderItem = function (table, item) { 
    return $("<li>") 
     .data("item.autocomplete", item) 
     .append("<div class='listFullName'>" + item.label + "</div>" + "<div class='listEmployeeID'>" + item.value + "</div>" + "<div class='listJobTitle'>" + item.JobTitle + "</div>") 
     .appendTo(table); 
}; 
$("#employeeLookup").autocomplete({ 
    source: [ 
     { value: 1, label: "Bob Smith", JobTitle: "President" }, 
     { value: 2, label: "Bob Washington", JobTitle: "Vice-President" }, 
     { value: 3, label: "Bobby Fischer", JobTitle: "Secretary" }, 
     { value: 4, label: "Bobby Brady", JobTitle: "Treasurer" }, 
     { value: 5, label: "Bobby Socks", JobTitle: "Senior Vice-President" }, 
     { value: 6, label: "Barney Rubble", JobTitle: "Sidekick" }, 
     { value: 7, label: "Brenda Stevens", JobTitle: "Assistant Senior Vice-President" } 
    ], 
    minLength:1 
}); 

Aquí está la CSS a continuación añado para dar formato a las columnas:

.listFullName{ 
    width:200px; 
    display:inline-block; 
} 
.listJobTitle{ 
    width:150px; 
    display:inline-block; 
} 
.listEmployeeID{ 
    width:100px; 
    display:inline-block; 
} 

Nota que agregar la clase de 'ui-autocompletar-categoría' a la fila de encabezado para evitar que sea seleccionable en el resultados. Agregué el atributo aria-label para evitar una excepción de jQueryUI en tiempo de ejecución aparentemente causada por el encuentro de un elemento de la lista que no se procesó utilizando _renderItemData, aunque no hice una inmersión profunda en eso.

Ahora, si usted está tirando de los datos a través de AJAX, como en el siguiente ejemplo:

$("#employeeLookup").autocomplete({ 
    source: function (request, response) { 
     // var id = $(this); 
     // alert(id); 
     $.ajax({ 
      url: "Search.asmx/FindEmployee", 
      data: "{ 'partialName': '" + request.term + "'}", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         FullName: item.FullName, 
         EmployeeID: item.Person_ID, 
         JobTitle: item.JobTitle, 
         label: item.FullName, 
         value:item.FullName 
        } 
       })) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(XMLHttpRequest); 
      } 
     }); 
    }, 
    minLength: 3, 
    delay: 500, 
    select: function (event, ui) { 
     alert("select" + ui.item.FullName); 
    } 
}); 

Se podría cambiar la anulación _renderItem a esto:

$.ui.autocomplete.prototype._renderItem = function (table, item) { 
    return $("<li>") 
     .data("item.autocomplete", item) 
     .append("<div class='listFullName'>" + item.FullName + "</div>" + "<div class='listEmployeeID'>" + item.EmployeeID + "</div>" + "<div class='listJobTitle'>" + item.JobTitle + "</div>") 
     .appendTo(table); 
}; 

En caso de éxito, jQueryUI está buscando elementos de "etiqueta" y "valor" en la matriz resultante. Puede asignar otros elementos también para su propia claridad de codificación, pero "etiqueta" es el elemento de matriz que jQueryUI Autocompletar buscará/filtrará, y "valor" es el elemento de matriz que JQueryUI Autocompletar pondrá en la entrada html una vez que seleccione un valor de la lista.