JQuery UI - автозаполнение - изменить метку поля, сохраняя то же значение поста - PullRequest
Новая
       18

JQuery UI - автозаполнение - изменить метку поля, сохраняя то же значение поста

1 голос
/ 06 марта 2012

я работаю над этой формой ввода данных jquery, в которой мне нужно определенное поле для автозаполнения данными из mysql

у меня все работает, автозаполнение извлекает данные из sql через php, отлично подходит для английских / латинских и utf8 символов

значения извлекаются из SQL как "номер" => "имя" "

прямо сейчас автозаполнение имеет 3 значения в выходных данных, значение, метку и идентификатор. в качестве идентификатора и значения используется имя и метка - это «номер» моей строки sql (которая публикуется на следующей странице при отправке формы)

так что все работает нормально, мой «номер» выложен правильно, есть небольшое раздражение, хотя

когда я выбираю что-то из списка автозаполнения, поле заполняется цифрой есть ли способ заполнить его именем? То есть: поиск «имя», получить выпадающий список с «имена», нажмите и получить «имя» в поле, и когда я отправляю, я отправил «номер»?

любая помощь будет принята с благодарностью.

если вам нужно взглянуть на мой код, он будет опубликован на предыдущий вопрос: Jquery ui - автозаполнение - кодировка UTF8

Спасибо заранее:)

Ответы [ 2 ]

2 голосов
/ 06 марта 2012

Обычный способ сделать это:

  1. Используйте скрытый input, чтобы сохранить значение, которое вы хотите POST, а затем заполните автоматически отдельное поле.
  2. Заполнитескрытое input в select
  3. Заполните видимое, автозаполненное input свойством label выбранного элемента.

Так, например:

HTML: 

<input type="hidden" name="name" />
<input type="text" id="name_auto" />

JavaScript: 

$(function () {
    var cache = {},
        lastXhr;
    $( ".name" ).autocomplete({
        minLength: 1,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            this.value = ui.item.label;
        },
        change: function (event, ui) {
            if (ui.item) { 
                $("input[name='name']").val(ui.item.value);
            } else {
                $("input[name='name']").val('');
            }
        }
    });
});
1 голос
/ 06 марта 2012

Вы можете использовать результат (обработчик) из u'r autocomplete, где переменные данные, такие как массивы, и вы можете вернуть два данных одновременно Expl: в javascript 

$().ready(function()
{
var url = "<?=base_url()?>index.php/master/agen";
var width_val = 308;
$("#name_auto").autocomplete(url,
{
    width: width_val,
    selectFirst: false,
 });

 $("name_auto").result(function(event, data, format)
 {
         $("#name_auto").val(data[0]);
         $("#id").val(data[1]);
 });
});

в HTML: 

<input type="hidden" name="number" id="id" />
<input type="text" id="name_auto" name="name" />

в PHP: 

foreach ($source->result() as $row)
{
echo "$row->nama|$row->id\n";
}

примечание: здесь я использую PHP CodeIgniter в его

...