Автозаполнение jQuery не работает должным образом

Question

У меня проблема с автозаполнением jQuery.Я использую данные JSON, полученные из базы данных MySQL с помощью функции PHP.

$.ajax({
        dataType: 'json',
        async: false,
        method: 'post',
        success: function(data) {
            test = data;
        }, 
        url: '<?php echo site_url('products/autocomplete/'); ?>'
    });

Итак, мои данные JSON хранятся в переменной: 'test'.Это мой код автозаполнения:

$( "#prodname" ).autocomplete({
                    minLenght: 2,
                    source: test,
                    focus: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        return false;
                    },
                    select: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        $( "#uname" ).val( ui.item.uname );
                        $( "input[name=prodname_fk]" ).val( ui.item.id );
                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.prodname + "</a>" )
                        .appendTo( ul );
                };

Данные загружаются правильно и все, но поле автозаполнения не работает должным образом.Первый элемент моего JSON-объекта начинается с «b», поэтому только когда я нажимаю букву «b», появляется автозаполнение (предложения).

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

Мне нужно автозаполнение в моем поле Product, поэтому, когда пользователь выбирает продукт, скрытыйПоле (prodname_fk) получает соответствующий идентификатор продукта.А поле uname (единица измерения) используется только для отображения.

Прилагаю картинку для справки.

Заранее спасибо.

Answer 1

Вот как я это сделал.

$( "#prodname" ).autocomplete({
                    minLenght: 2,
                    source: "<?php echo site_url('products/autocomplete/'); ?>",
                    select: function( event, ui ) {
                            $( "#prodname" ).val( ui.item.prodname );
                            $( "#code" ).val( ui.item.code );
                            $( "#uname" ).val( ui.item.uname );
                            $( "input[name=prodname_fk]" ).val( ui.item.id );
                        return false;
                    }
                    })
                    .data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.prodname + "</a>" )
                        .appendTo( ul );
                };

Теперь я использую асинхронный поиск, поэтому всякий раз, когда пользователь вводит что-то в поле «Продукты», отправляется запрос GET со сроком (http://localhost/ci/products/autocomplete?term=xxx), поиск по названию продукта в базе данных с возвратом результатов сопоставления (JSON) в поле с предложением автозаполнения.

Answer 2

Если ваша php-страница возвращает json, вы можете поместить ее URL-адрес непосредственно в функцию автозаполнения:

<script>
    $(function() {
        $( "#birds" ).autocomplete({
            source: '<?php echo site_url('products/autocomplete/'); ?>',
            minLength: 2,
            select: function( event, ui ) {
                $( "#prodname" ).val( ui.item.prodname );
                $( "#uname" ).val( ui.item.uname );
                $( "input[name=prodname_fk]" ).val( ui.item.id );
            }
        });
    });
</script>

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

'<em>' + item.prodname + '</em>(' + item.id ')'

Вы должны попытаться адаптировать базовые образцы из http://jqueryui.com/demos/autocomplete/#remote, а затем добавить более расширенную функциональность.