Suche html mit jQuery (Autocomplete)

Question

habe ich ein paar versteckten divs mit einer einzigen Tabelle in sie. Benutzer müssen für einen Namen (können Leerzeichen enthalten) innerhalb der ersten ten Zelle, und dann wieder die div-ID suchen.
Ich schaute in die jQueryUI zum automatischen Vervollständigung Plugin, aber Probleme hat es an der Arbeit mit mehreren Werten zu bekommen. Plugin docs und Demos .
Ich benutze „Benutzerdefinierte Daten und die Anzeige“ Beispiel als Basis mit einem vordefinierten Datenarray, aber ich mag es vermeiden und einfach Selektor verwenden.

Suchfeld

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

Divs

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

Property „label“ ist der erwartete Name Wert enthält, um das Drop-Down-Ergebnis UL zu füllen. Ändern Sie den Standard _renderItem Verfahren erfordert das Überschreiben, wie diese

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

Aber es fehlerhaft zu sein scheint.

Kann ich einen Wahlschalter (oder Callback-Funktion) machen, um zu vermeiden, um das nameAC Array zu machen?

Answer 1

Kim, ich glaube, die Art und Weise Sie es tun ziemlich solide ist. Wenn Sie die Quelle durch eine Funktion erzeugt haben wollen, schlage ich vor, Sie machen es einfacher, Ihre Daten zu analysieren, das heißt, indem sie in jedem div einen span-Tag um den Namen setzen.

That being said, hier ist ein Weg, um es mit Ihren Daten zu tun, wie es jetzt ist. Es ist wahrscheinlich nicht perfekt, so meinen Vorschlag:

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

Natürlich, wenn Ihr Benutzername so etwas wie das ist: <span class="name">John Doe</span>, dann wäre das Etikett einfach: $(this).find('span.name').text()

Sie können eine einfache Version davon in Aktion sehen hier: http://jsfiddle.net/ryleyb/MYCbX /

Bearbeiten : ich erwähnt habe, soll dies von den Autocomplete wie folgt aufgerufen wird:

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