Personalizar resultado jQuery autocompletado

Question

estoy usando la función de autocompletar jQuery con una fuente de datos remota

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 

       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
}); 

Funciona muy bien. Cuando escribo "a", aparece una lista de actividades (extraídas de una base de datos) que comienzan con eso. Lo que me gustaría hacer es agregar un parámetro personalizado (el ID de la actividad) en el resultado.

Porque cuando un usuario seleccione una actividad más adelante voy a tener que "volver a hacer" una búsqueda SQL para obtener el ID de la actividad ...

Entonces, ¿hay una manera de incluir el identificador de la actividad en el devuelto JSON desde el autocompletar?

Gracias

Answer 1

Si el/ajax/index.php página de auto sugerencia devuelve una matriz de objetos JSON con dos teclas de "etiqueta" y el "valor" (en lugar de una matriz de cadenas), la interfaz de usuario de autocompletar el jQuery complemento con la tecla "etiqueta" para mostrar en la lista de autocompletar, pero en realidad le da el objeto JSON que se seleccionó en el evento de selección. Entonces puede hacer referencia al valor del objeto.

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 
       //data assumes [{label: "result 1", value: 1}, {label: "result 2", value: 2}]; 
       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     var selectedItem = ui.item; 
     var id = selectedItem.value; 
     var label = selectedItem.label; 

     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
}); 

No he probado thist, acaba de encontrar aquí: http://www.petefreitag.com/item/756.cfm

Answer 2

La forma Wesley describe es lo que estamos utilizando actualmente también.

Al devolver ambos label y id en nuestros objetos JSON, podemos agarrar ese identificador de la manera que queremos (en nuestro caso, almacenarlo en una entrada oculta), mientras que la etiqueta se utiliza para mostrar nuestro usuarios cuyo registro está seleccionado.

Ejemplo básico: http://jsfiddle.net/NLK5p/4/

Answer 3

¿Qué fuente de datos está utilizando? Sugiero fuertemente freebase es una base de datos gratuita dentro de más de 12 millones de voces y proporciona servicios web para la autosugestión (incluidas funciones js) en los campos más diversos (trabajos, deportes, actores, películas o lo que quieras). .. no todo el mundo lo sabe, pero google compró el proyecto el año pasado (todavía está disponible y gratis) por lo que debería ser un servicio web prometedor para las fuentes de datos.