Autocomplete – alapok

cakephpHabár több leírást is találtam arról, hogy hogyan lehet cake-kel autocomplete input mezőt létrehozni, egyik sem volt teljes. Annak ellenére, hogy egyszer kétszer pár hónappal ezelőtt már csináltam is ilyet, most újra ráment több mint egy órám mire összeraktam. Mivel pár hónap múlva semmiképpen nem akarok majd vele ennyit eltölteni, hát most jól leírom.

Autocomplete

Azt hiszem ezt a funkciót már mindenki használta valahol. Az a lényege, hogy amikor egy input keresési mezőbe kezdjük bepötyögni, hogy “man”, akkor a háttérben végigfut egy keresés és a lehetséges eredményekből valamilyen algoritmus segítségével már meg is kapunk pár eredményt, mint pl “manual”, “manci”, stb. ezek az eredmények jobb esetben a keresési input alatt jelennek meg és választhatunk közülük. Így működik a goggle toolbar és a google suggest.

CakePHP megvalósítás

Mivel ez egy általánosan használt funkció a cake is beépítette az ajax helpereébe. Használatához a következőket kell tennünk:

  • JS elérhetővé tétele: Az app/views/layouts/default.thtml file-ba a </head> rész előtt be kell linkelnünk a szükséges JavaScript fileokat.
    <?php
       print $javascript->link('prototype');
       print $javascript->link('scriptaculous.js?load=effects');
       print $javascript->link('controls');
    ?>
    

    Persze ezek csak akkor fognak működni, ha a app/webroot/js könyvtárba letöltjük a szükséges librarykat. Kicsomagolás után a magam részéről az src és a lib könyvtárban található js fileokat másoltam be.

  • Az ajax helper meghívása: Az app_controller.php fileba a $helper tömböt ki kell egészíteni az ajaxxal is. Nálam így var $helpers = array('html','javascript','form','ajax'); lett. Ha nem akarjuk minden controllerben használni, akkor persze elég csak abba a controller fileba megtenni ezt, ahol használni akarjuk.

    Ha ez megvan, akkor újfent a default.thtml filehoz kell nyúlnunk, és betennünk 4 sort ami.

       <form action="/tasks/index" method="post">
          <?php
             print $ajax->autoComplete('Task/task', '/tasks/search');
             print $html->submit('Keres');
          ?>
       </form>
    

    Az autoComplete függvénynek elég két paramétert átadnunk. Az első a létrehozandó input mezőnket azonosítja, a második pedig a meghívandó controller függvényt.

  • Adatbázis lekérés: Ezek után nyilvánvaló, hogy létre kell hoznunk a controllerünkben az előbb meghívott függvényt.
    function search(){
       //ajaxos keresés a taskokban
       $this->Task->recursive = 1;
       $this->set('searchResults', $this->Task->findAll("task LIKE '{$this->data['Task']['task']}%'",null,null,null,1,1));
       $this->render('searchResults','ajax');
       }
    

    Magyarul a findAll metódus segítségével keressük azokat a rekordokat ahol “task” mező a begépelt szótöredékkel kezdődik. Az eredmények a $searchResults tömbbe kerülnek.

  • Az eredmények megjelenítése: Ezek után már csak a viewt kell létrehoznunk az eredmények megjelenítéséhez. Ehhez (nálam) az app/views/tasks/search_results.thtml fileba az alábbi került:
    <ul>
    <?php
       foreach($searchResults as $s){
          print '<li><a href="/tasks/view/'.$s['Task']['id'].'">'.$s['Task']['task'].'</a></li>';
       }
    ?>
    </ul>
    

    Amit sehol sem találtam leírva, az az volt, hogy mindenféleképpen ul – li listaként kell kezelnünk az eredményeket, máskülönben nem fognak megjelnni.

  • CSS: már csak annyi maradt hátra, hogy kicsit pofozzunk az eredmények kinézetén:
    div.auto_complete {
       position         :absolute;
       width            :200px;
       background-color :white;
       border           :1px solid #888;
       margin           :0;
       padding          :0;
       }
    
    li.selected { background-color: #ffb; }
    
    

Ezzel az autocompleterünknek már szépen kell dalolnia, kiadnia az eredményeket és azokra kattintva, vagy a fel-le nyilakkal valamelyiket kiválasztva rá kell mennie az érintett elemre.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.