Поиск HTML с помощью jQuery (автозаполнение) - PullRequest
Новая
       36

Поиск HTML с помощью jQuery (автозаполнение)

1 голос
/ 04 ноября 2010

У меня есть куча скрытых div с одной таблицей внутри.Пользователям необходимо найти имя (может содержать пробелы) в первой ячейке, а затем вернуть идентификатор div.
Я посмотрел на плагин автозаполнения jQueryUI, но у меня возникли проблемы с его работой с несколькими значениями.Плагин docs и demos .
Я использую пример "Пользовательские данные и отображение" в качестве базы с предопределенным массивом данных, но я бы хотел избежать этого и просто использовать селектор.

Поле поиска 

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

Свойство «label» - это ожидаемое имя, которое будет содержать значения для заполнения раскрывающегося списка UL.Для его изменения требуется перезаписать метод _renderItem по умолчанию, например, 

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

Но это выглядит некорректно.

Можно ли создать селектор (или функцию обратного вызова), чтобы избежать создания массива nameAC?

1 Ответ

2 голосов
/ 04 ноября 2010

Ким, я думаю, что ты делаешь это довольно солидно.Если вы хотите, чтобы источник генерировался функцией, я предлагаю вам упростить синтаксический анализ ваших данных, т. Е. Поместив тег span вокруг имени в каждом div.

Как говорится, вот один из способовсделайте это с вашими данными, как сейчас.Это, вероятно, не идеально, поэтому мое предложение: 

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

Очевидно, что если бы ваше имя пользователя было примерно таким: <span class="name">John Doe</span>, то ярлык был бы проще: $(this).find('span.name').text()

Вы можетепосмотрите простую версию этого в действии здесь: http://jsfiddle.net/ryleyb/MYCbX/

РЕДАКТИРОВАТЬ : я должен был упомянуть, это вызывается из автозаполнения, как это: 

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