JQuery Autocomplete - форматировать листинг и возвращать только часть в текстовое поле

Question

Я использую JQuery Autocomplete , и он работает просто отлично. Я использую его, чтобы позволить кому-то искать пользователей вне базы данных, выполняя поиск по фамилии или номеру.

Прямо сейчас созданный выпадающий список представляет собой результаты SQL-запроса и выглядит примерно так:

$row_rst['lName'] . ', ' . $row_rst['fName'] . " - " . $row_rst['user'] . "|" . $row_rst['id']

который выводит что-то вроде:

Jones, Henry - hjones
Gibbons, Peter - pgibbons

Когда я выбираю Генри, в текстовом поле появляется Джонс, а Генри - Джонс, а в скрытом поле - его идентификатор.

Я бы хотел отформатировать выпадающий список в столбцах, если это возможно, и возвращать только Джонс и Генри в текстовое поле, если это возможно.

Возможен ли какой-либо из этих вариантов? Я думаю, что это связано либо с formatItem (строка) или formatResult (строка), но я не уверен, и я не могу найти, как это сделать.

Answer 1

Автозаполнение также доступно в последней версии jQuery UI (1.8 для использования с jQuery 1.4+), которая, я думаю, является более актуальной, чем версия, которую вы ' ve связанный.

Если вы посмотрите на пример пользовательских данных , то в источнике вы увидите, что он использует событие select. Вы можете сделать что-то подобное и обрезать то, что вам не нужно, с вашей строки.

например, что-то вроде этого (вам может понадобиться немного отладить, чтобы найти, где находятся ваши значения в объекте пользовательского интерфейса):

 ....
 select: function(event, ui) {
            $('#textBoxIDInHere').val(ui.item.value.substring(0,ui.item.value.indexOf("-", 0)));
            return false;
         }
 ....

Что касается форматирования, если вы выберете тему на странице загрузки jQuery ui, заархивированный пакет поставляется с файлом .css. Вы можете просмотреть различные предустановки здесь , и эта страница автозаполнения имеет вкладку внизу под названием Theming , которая показывает, какие классы актуальны.

Хотя это не совсем то же самое, что и плагин, который вы связали, но, надеюсь, он хотя бы немного вам поможет:)