jQuery UI autocompletar personalizado como fuente en lugar de Array cadena

Question

estoy usando jQueryUI autocompletar y me pregunto cómo utilizar un objeto personalizado como mi fuente de datos (es decir, quiero pasar de nuevo una lista del tipo siguiente):

public class Tag 
{ 
    public string Name { get; set; } 
    public int Count { get; set; } 
} 

el código de autocompletar que actualmente estoy usando (y que funciona bien cuando paso hacia atrás una matriz de cadena recta hacia adelante de los nombres) es más o menos una copia fuera del sitio de jQuery UI:

$(function() { 
     function split(val) { 
      return val.split(/ \s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function (event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: function (request, response) { 
       $.getJSON("Home/GetTag", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       // custom minLength 
       var term = extractLast(this.value); 
       if (term.length < 1) { 
        return false; 
       } 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function (event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(" "); 
       return false; 
      } 
     }); 
    }); 

lo único He cambiado desde la fuente de demostración original es la URL y estoy dividiendo en un espacio en lugar de coma (para autocompletar múltiple).

Aquí está el código HTML:

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"/> 
</div> 

Idealmente, quiero presentar al usuario una lista de nombres, con el recuento correspondiente al lado.

Answer 1

cómo utilizar un objeto personalizado como mi fuente de datos

Es necesario dar formato a los datos de manera que el widget de espera. Debe tener una propiedad label o una propiedad value (o ambas) en cada objeto en la matriz de resultados para que el widget muestre sus resultados. Puede incluir otros datos en el objeto, siempre que cumpla esos requisitos.

Para dar formato a los datos que llegan desde el servidor, la convención es utilizar $.map:

source: function (request, response) { 
    $.getJSON("Home/GetTag", { 
     term: extractLast(request.term) 
    }, function (data) { 
     response($.map(data, function (item) { 
      return { 
       value: item.Name, 
       count : item.Count 
      }; 
     }); 
    }); 
}, 

(no probado)

Esto debería obtener resultados poblar para usted. Esto va de la mano con la segunda parte de su pregunta:

Idealmente, quiero presentar al usuario una lista de nombres, con la cuenta correspondiente al lado.

Esto se logra con bastante facilidad, siguiendo this demo como guía:

$("#auto").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br />" + item.count + "</a>") 
      .appendTo(ul); 
    }; 

Puede anular la función _renderItem para mostrar lo que quiera, siempre y cuando se trata de una li que contiene a etiqueta y tiene datos item.autocomplete.

Combina esas dos estrategias y deberías estar en el negocio. Para un ejemplo práctico de esto, echa un vistazo a un ejemplo aquí: http://jsfiddle.net/andrewwhitaker/UvegL/

Este ejemplo combina una fuente de datos remota y datos personalizados & pantalla. Espero que ayude, a pesar de que la llamada AJAX es un poco diferente.