Buscar html con jQuery (autocompletar)

Question

Tengo un montón de divs ocultos con una sola tabla en su interior. Los usuarios tienen que buscar un nombre (puede contener espacios) dentro de la primera celda XX, y luego devolver el ID de div.
Miré en el jQueryUI autocompletar plug-in, pero que tienen problemas con su funcionamiento con varios valores. Plugin docs y demos .
Yo uso "datos personalizados y display" ejemplo como base con una matriz de datos predefinido, pero me gustaría evitarlo y simplemente utilizar selector.

Cuadro de búsqueda

<label for="search_name">Find name</label>
<input type="text" name="search_name" value="" id="search_name">
<span style="display:none;" id="search_result"></span>

Div

<div id="name_101284"><table>
  <tr><th colspan="5">John Doe (<a href="http://link">text</a>) - snip</th></tr>
  <tr><th>C1</th><th>C2</th><th>C3</th><th>C4</th><th>C5</th></tr>
  <tr><td>snip
</table></div>

JS

  var nameAC = [
   {label:"John Doe",id:"101284"},
   {label:"Johnny",id:"152345"},
   {label:"Jim Nelson",id:"77344"},
   {label:"Jimmy",id:"87457"},
   {label:"Maria",id:"100934"},
   {label:"Maria Nelson",id:"94734"},
   {label:"Jane Doe",id:"86247"},
   {label:"Janet",id:"106588"}
  ];
  $('#search_name').autocomplete({
    minLength: 1,
    delay: 300,
    source: nameAC,
    focus: function(event, ui) {
      $('#search_name').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#search_result').text(ui.item.id);
      $('#search_result').show();
    }
  });

Propiedad "etiqueta" es el nombre que debe contener valores para completar el resultado desplegable UL. Requiere el cambio de sobrescribir el método _renderItem por defecto, como este

$('#search_name').autocomplete({
 stuff
})
.data("autocomplete")._renderItem = function(ul, item) {
  return $("<li></li>")
  .data("item.autocomplete", item)
  .append("<a>" + item.name + "</a>")
  .appendTo(ul);
};

Pero parece errónea.

¿Puedo hacer una (o función de devolución de llamada) Selector para evitar tener que hacer la matriz nameAC?

Answer 1

Kim, creo que la forma en que está haciendo es bastante sólido. Si usted quiere tener la fuente generada por una función, le sugiero que haga que sea más fácil para analizar sus datos, es decir, poniendo una etiqueta span alrededor del nombre de cada div.

Una vez dicho esto, aquí hay una manera de hacerlo con sus datos como lo es ahora. Es probable que no es perfecto, por lo tanto mi sugerencia:

function makeArray() {
    var results = [];
    $("div[id^='name_']").each(function() {
        results.push({
            'label': $(this).find('th:first').text().replace(/(.*) \(.*/, '$1'),
            'id': this.id.replace(/name_(\d+)/, '$1')
        });
    });
    return results;
}

Obviamente, si su nombre de usuario era algo como esto: <span class="name">John Doe</span>, entonces la etiqueta sería más fácil: $(this).find('span.name').text()

Se puede ver una versión simple de esto en acción aquí: http://jsfiddle.net/ryleyb/MYCbX /

Editar : debería haber mencionado, esto se llama desde la función de autocompletar como esto:

$('#search_name').autocomplete({
    source: makeArray() // <-- note the brackets, function is being **called** 
});