[ZendFramework] JQUERY UI Autocomplete, Ajax i baza danych Opcje

[Krisu]

Witam,
próbuję w swojej aplikacji opartej o zend framework zaimplementować Autocomplete z JQuery UI z użyciem AJAX-a http://jqueryui.com/autocomplete/

Posiadam formularz przez który dodaję rekordy do bazy danych.
Opisują go takie pola jak
nazwa użytkownika,
opis zadania,
oraz ukryte pole id użytkownika.

Chciałbym tak użyć autocomplete by przez Ajaxa podczas wprowadzania nazwy pobierał dane z bazy i wyświetlał podpowiedzi już istniejących osób. Zaś po wybraniu konkretnej do ukrytego pola ma zwracać informację o jego id.

W poniższy sposób w widoku wyświetlam dane użytkowników i nie ma tu żadnych problemów

[PHP] pobierz, plaintext 
foreach ($this->clients as $k => $client):
            <tr>
                <td><?php echo $client['client_id'] ?></td>
                <td><?php echo $client['full_name'] ?></td>
            </tr>
endforeach;
[PHP] pobierz, plaintext 

Nie mam jednak pomysłu jak przypisać dane do źródła w JQUERY UI

[HTML] pobierz, plaintext 
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
[HTML] pobierz, plaintext 

Ten post edytował Krisu 29.06.2014, 14:20:56

[Krisu]

Kombinuję cały dzień i za nic nie mogę rozkminić dlaczego jest jak jest, a mianowicie, po wpisaniu frazy pojawiają się puste podpowiedzi (wiele pól, ale bez żadnej treści), proszę o pomoc bo nie mam już pomysłów.

Application_Model_DbTable_Client

Kod

    public function readFullDataClients() {
        
        $select = $this->select()
                ->from(array('c' => 'client'),
                       array('c.client_id', 'c.full_name'))
                ->order('client_id ASC');
        
                return $this->fetchAll($select);
    }

autocompleteAction()

Kod

    public function autocompleteAction()
    {
        $this->_helper->layout()->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);
        
        $DbTable = new Application_Model_DbTable_Client();
        $objects = $DbTable->readFullDataClients();

        $valuesJson = Zend_Json::encode($objects);
        echo $valuesJson;
    }

public/client/autocomplete

Kod

[{"client_id":"1","full_name":"Krzysztof"},{"client_id":"2","full_name":"null"},{"client_id":"3","full_name":null},{"client_id":"4","full_name":"Ireneusz"},{"client_id":"5","full_name":"Leszek"},{"client_id":"6","full_name":"Jaros\u0142aw "},{"client_id":"7","full_name":"Marcin"},{"client_id":"8","full_name":"\u0141ukasz"},{"client_id":"9","full_name":"Krzysztof"}]

Layout - sekcja header

Kod

<script>
$(function() {    
        $( "#peliculas" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "<?php echo $this->url(array('controller' => 'client', 'action' => 'autocomplete'), 'default')?>",
                    dataType: "json",
                    data: {terms: request.term},
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
</script>

client.phtml

Kod

<div class="ui-widget">
  <label for="peliculas">Peliculas: </label>
  <input id="peliculas" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

Możliwe, że problem jest banalny, ale już nie mam siły... :/




EDIT

Udało mi się co nie co zrobić

Kod

$( "#project" ).autocomplete({
    minLength: 0,
    source: "<?php echo $this->url(array('controller' => 'client', 'action' => 'autocomplete'), 'default')?>",
    dataType: "jsonp",
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.full_name );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.full_name );
        $( "#project-id" ).val( ui.item.client_id );
        return false;
    }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
});

Kod się trochę różni, ale mniejsza z tym, teraz w jedno okineko wstawiam pełną nazwę użytkownika, w w drugiego inputa wstawiam jego id, czyli wszystko działa jak chciałem...
poza jednym szczegółem, nie działa filtracja w autocomplete nie ważne co wpiszę, zawsze wyświetla wszystko, a okienka nadal są puste, ale gdy się cokolwiek zaznaczy z myszki lub klawiatury to dane wprowadza.
Teraz już naprawdę nie wiem jak to ogarnąć... problem pojawia się tylko w chwili gdy odwołuję się do źródła danych json po przez adres akcji, gdy jednak dane są odkodowane w js w tym samym pliku nie ma żadnego problemu... trochę to dziwne :/

Działa

Kod

var projects = [
{
value: "jquery",
label: "jQuery"
},
{
value: "jquery-ui",
label: "jQuery UI"
},
{
value: "sizzlejs",
label: "Sizzle JS"
}
];

Nie działa

Kod

[{"client_id":"1","full_name":"Krzysztof"},{"client_id":"2","full_name":"null"},{"client_id":"3","full_name":null},{"client_id":"4","full_name":"Ireneusz"},{"client_id":"5","full_name":"Leszek"},{"client_id":"6","full_name":"Jaros\u0142aw "},{"client_id":"7","full_name":"Marcin"},{"client_id":"8","full_name":"\u0141ukasz"},{"client_id":"9","full_name":"Krzysztof"}]

UWAGA to nie wina nazw kluczy, gdyż podczas testowania ustawiłem właściwe.

Ten post edytował Krisu 29.06.2014, 23:21:42