Cerca html con jQuery (completamento automatico)

Question

Ho un sacco di div nascosti con un unico tavolo al loro interno. Gli utenti hanno bisogno per la ricerca di un nome (può contenere spazi) all'interno della prima cella °, e quindi restituire l'ID div.
Ho guardato nel jQueryUI completamento automatico plug-in, ma hanno problemi a farla funzionare con più valori. Plugin docs e demo .
Uso "dati personalizzati e visualizzazione" esempio come base con un array di dati predefiniti, ma vorrei evitarlo e semplicemente utilizzare selettore.

Casella di ricerca

<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();
    }
  });

Proprietà "etichetta" è il nome dovrebbe contenere i valori per riempire il risultato discesa UL. Cambiare Richiede sovrascrivendo il metodo _renderItem di default, come questo

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

Ma sembra viziata.

Posso fare un selettore (o funzione di callback) per evitare di dover fare la matrice nameAC?

Answer 1

Kim, penso che il modo in cui si sta facendo è abbastanza solido. Se si vuole avere la sorgente generato da una funzione, vi consiglio di rendere più facile per analizzare i dati, cioè mettendo un tag span intorno al nome di ogni div.

Detto questo, ecco un modo per farlo con i tuoi dati di come è ora. Probabilmente non è perfetto, quindi il mio suggerimento:

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;
}

Ovviamente, se il nome utente è stato qualcosa di simile: <span class="name">John Doe</span>, quindi l'etichetta sarebbe più facile: $(this).find('span.name').text()

Si può vedere una semplice versione di questo in azione qui: http://jsfiddle.net/ryleyb/MYCbX /

Modifica : Avrei detto, questo è chiamato dal completamento automatico in questo modo:

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