. Выберите ui.item для возврата count

Question

У меня есть функция автозаполнения. После генерации selectin в поле ввода, как я могу получить возвращаемый номер выбора?

$(this) 
.autocomplete({ 
. 
. 
.select: function(event, ui){ 
    $(this).val(ui.item.value); //$(this) will be input with selected value 
    alert(ui.item.count); // how can I get the count of the selected item? 
    },  
    }); 

т.е. автозаполнения генерировать

apple 

pear 

orange. 

когда я выбираю грушу, то вернуть мне 2.

Answer 1

Я нашел в способ получить информацию, которую вы ищете, но мы надеемся, не лучший способ или единственный способ.

$(this).autocomplete({ 
    select: function(event, ui){ 
     // blah 
    }, 
    open: function(event, ui) { 
     console.log($(this).next().next().children()); 
    } 
}); 

open event является «Срабатывает, когда меню предложение открыт или обновлен.» В этот момент виджет автозаполнения создал элементы dom со своими собственными кликами для выбора сразу после <input>, к которому прикреплен автозаполнение. (Существует также <span>, поэтому я дважды вызываю .next().) Но эта строка кода в функции open вернет вам список дочерних узлов <li> на <ul>, который создается внутри.

Matching против вашего примера, вы получите набор JQuery из <li> элементов для следующего HTML-разметки:

<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a> 
</li> 
<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a> 
</li> 
<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a> 
</li> 

Важное примечание:id тег здесь не является числовой индекс элементов. Это вместо этого абсолютный идентификатор элемента в исходном источнике. Таким образом, у вас нет гарантии, что они последовательны. В качестве примера, если исходный источник на самом деле это: ["apple", "banana", "pear", "starfruit", "grape", "orange"], то идентификаторы <a> тегов для результирующих данных на самом деле будут яблоками: ui-id-0, груша: ui-id-2, оранжевый: ui-id-5. Вы не можете полагаться на этот идентификатор, чтобы дать вам заказ элемента, который пользователь нажал в списке, так как он равен абсолютным по отношению к источнику вместо относительно набора результатов.

(я первоначально имел идентификаторы в моем списке, начиная с 1, который, как Hogan указывает, что они начинаются с 0.)

В этот момент, вы можете сделать один из двух вещей, чтобы получить вам отдых кстати. Первый заключается в том, чтобы хранить коллекцию (необработанную или преобразованную, как и в формате объекта) в некоторой переменной, которая будет в области в обратном вызове события . Я бы рекомендовал преобразование списка в объект, как следующее:

lastResultSet = { 
    apple : 1, 
    pear : 2, 
    orange : 3 
} 

Тогда ваш .select код мог бы просто сделать это:

var selectedIndex = lastResultSet[$(this).val(ui.item.value)]; 

Другой подход заключается в том, чтобы установить свои собственные .click обратные вызовы на <li><a> dom для захвата индекса в этой точке. Я не рекомендую это, потому что вы можете легко вмешиваться в поведение автозаполнения или вызывать утечку памяти, не доставляя обработчики кликов несвязанными и удаляемыми до того, как автодополнение будет уничтожено домом <li>.

Независимо от того, я предлагаю вам задать тот же вопрос на jQuery UI forums or IRC support channel, и, надеюсь, кто-то может получить вам ответ, который не так хвалит полагаться на подразумеваемый порядок элементов Dom.

Answer 2

Вы можете сделать это, как это и возвращает число от 0 до числа элементов -1

ОДНАКО, это зависит от внутреннего кода jQuery.UI и не должны, вероятно, будет использоваться.

.select: function(event, ui){ 
    var idElements = event.toElement.id.split("-"); 
    var num = idElements[idElements.length-1]; 
    alert(num); 
    },  

Fiddle

Как это работает:

Как Patrick M указал (а он был выключен один) внутренне автозаполнения создает элементы, которые выглядят следующим образом:

<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a> 
</li> 
<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a> 
</li> 
<li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a> 
</li> 

Мой код захватывает идентификатор выбранного элемента, а затем анализирует «порядковый номер» в конце.

Это НЕОБХОДИМАЯ идея использовать внутренне сгенерированный код пользовательского интерфейса таким образом, но теперь это работает.

Намного лучше не использовать внутреннее представление UI и вместо этого реализовать что-то похожее на то, что предлагает Патрик М. ИЛИ Возьмите код пользовательского интерфейса для автозаполнения из GIT и добавьте его в свой проект, тогда вы знаете, что изменения в этом файле не нарушат ваш код (однако возможны и другие изменения в пользовательском интерфейсе.)

Вы также можете предложить изменение чтобы команда включила этот показатель в мероприятие.

Answer 3

Просто используйте jQuery Autocomplete's reponse event.

$(this).autocomplete({ 
    response: function(event, ui) { 
     alert(ui.content.length); 
    } 
}); 

DEMO: http://jsfiddle.net/dirtyd77/SLGdE/12/

Надеется, что это помогает!

ПРИМЕЧАНИЕ: это работает с ajax.