JQuery UI автозаполнение не показывает результат - PullRequest
Новая
       8

JQuery UI автозаполнение не показывает результат

0 голосов
/ 26 сентября 2011

, поэтому я использую автозаполнение jquery ui вместо выпадающего списка, чтобы моим пользователям было легче выбирать сотни продуктов из базы данных.

$(function() {
    $(".autocomplete").autocomplete({
        source: function(request, response) {
            $.ajax({ 
                'url': "http://localhost/project/index.php/product/search_data/",
                'data': { 'txt_product_name': $('#txt_product_name').val()},
                'dataType': "json",
                'type': "POST",
                'success': function(data){
                    response(data);
                }
            })
        }, 
        minLength: 2,
        focus: function( event, ui ) {
            $(".txt_product_id").val(ui.item.product_id);
            return false;
        },
        select: function( event, ui ) {
            $( ".txt_product_id" ).val(ui.item.product_id);
            $( ".txt_product_code" ).val(ui.item.product_code);
            $( ".txt_product_name" ).val(ui.item.product_name);

            return false;
        }       
    }).data("autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.product_code + "<br>" + item.product_name + "</a>" )
            .appendTo(ul);
    };  
});

firebug сообщает мне, что php успешно генерирует запрошенные данные, как показано ниже. 

[
    {"product_id":"92","product_code":"TURE3052","product_name":"Choose Your Own Adventure"},
    {"product_id":"89","product_code":"UMPS3447","product_name":"Goosebumps"},
    {"product_id":"15","product_code":"ROSE7302","product_name":"The Name of the Rose"},
    {"product_id":"34","product_code":"LIFE1226","product_name":"The Purpose Driven Life"}
]

, но как-то результат не показывает.

есть идеи?

Я скопировал части кодов из http://jqueryui.com/demos/autocomplete/#custom-data. Я протестировал пример, и он работал.

1 Ответ

0 голосов
/ 27 сентября 2011

хорошо, я не совсем понимаю, как и почему, но так получилось, что мне нужно создать клоны текстового поля автозаполнения.для этого я использую live () для того, чтобы jquery мог перехватить событие нового клона.я модифицирую приведенный выше код, чтобы он выглядел так, как показано ниже: 

$(function() {
    $(".autocomplete").live('keyup.autocomplete', function() {
        $(".autocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({ 
                    'url': "http://localhost/project/index.php/product/search_data/",
                    'data': { 'txt_product_name': $('#txt_product_name').val()},
                    'dataType': "json",
                    'type': "POST",
                    'success': function(data){
                        response(data);
                    }
                })
            }, 
            minLength: 2,
            focus: function( event, ui ) {
                $(".txt_product_id").val(ui.item.product_id);
                return false;
            },
            select: function( event, ui ) {
                $( ".txt_product_id" ).val(ui.item.product_id);
                $( ".txt_product_code" ).val(ui.item.product_code);
                $( ".txt_product_name" ).val(ui.item.product_name);

                return false;
            }       
        }).data("autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.product_code + "<br>" + item.product_name + "</a>" )
                .appendTo(ul);
        };  
    })
});

как я уже сказал, я не понимаю, как и почему, но результат автозаполнения действительно появляется.чувствовал себя немного облегченным.но так как я должен понять свою собственную работу, я думаю, что должен найти объяснение.

идей?

...