![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 211 Pomógł: 0 Dołączył: 30.03.2006 Skąd: Żary Ostrzeżenie: (0%) ![]() ![]() |
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
Nie mam jednak pomysłu jak przypisać dane do źródła w JQUERY UI
Ten post edytował Krisu 29.06.2014, 14:20:56 |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 211 Pomógł: 0 Dołączył: 30.03.2006 Skąd: Żary Ostrzeżenie: (0%) ![]() ![]() |
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 |
|
|
![]() ![]() |
![]() |
Aktualny czas: 17.10.2025 - 05:57 |