Rechercher html avec jQuery (autocomplete)

Question

J'ai un tas de divs cachés avec une seule table à l'intérieur. Les utilisateurs doivent rechercher un nom (peut contenir des espaces) dans la première cellule e, puis retourner l'ID div.
Je regardais dans le plug-in jQueryUI autocomplete, mais ayant des problèmes à obtenir le travail avec plusieurs valeurs. Plugin docs et démos .
Je l'utilise par exemple en tant que base « données personnalisées et affichage » avec un tableau de données prédéfini, mais je voudrais éviter et il suffit d'utiliser le sélecteur.

champ de recherche

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

Propriété « label » est le nom qui devrait contenir des valeurs pour remplir le résultat de la liste déroulante UL. Changer la méthode nécessite l'écrasement par défaut _renderItem, comme celui-ci

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

Mais il semble viciée.

Puis-je faire un sélecteur (ou la fonction de rappel) pour éviter d'avoir à faire le tableau nameAC?

Answer 1

Kim, je pense que la façon dont vous le faites est assez solide. Si vous voulez avoir la source générée par une fonction, je vous suggère de le rendre plus facile à analyser vos données, à savoir en plaçant une balise span autour du nom dans chaque div.

Cela étant dit, voici une façon de le faire avec vos données comme il est maintenant. Il est sans doute pas parfait, donc ma suggestion:

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

Il est évident que, si votre nom d'utilisateur était quelque chose comme ceci: <span class="name">John Doe</span>, l'étiquette serait plus facile: $(this).find('span.name').text()

Vous pouvez voir une version simple en action ici: http://jsfiddle.net/ryleyb/MYCbX /

EDIT : Je l'ai dit, ce qu'on appelle de la saisie semi-automatique comme ceci:

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