YUI AutoComplete with CakePHP

YUI Autocomplete

Usually I find the YUI components fairly easy to understand and implement. Not so with Autocomplete. After a lot of aggrivation I have it implemented. Hopefully my work here will save you the same time and hassel I experienced. The resource best resource I found was James Gardner’s YUI Autocomplete AJAX Select Dropdown with ID post.

Model

public function getBreed($query) {

    $sql = "SELECT id, name FROM breed
                     WHERE name LIKE '" . Sanitize::escape($query) . "%'
                     ORDER BY name";
    $model = $this->query($sql);

    // do this immediately after the query
    $totalResultsReturned = $this->getAffectedRows();

    $sql = "SELECT COUNT(*) AS count FROM breed";
    $result = $this->query($sql);
    $totalResultsAvailable = $result[0][0]['count'];

    $json = '';

    $breed = array();
    foreach ($model as $entry) {
        $breed['Name'] = $entry['breed']['name'];
        $breed['ID'] = $entry['breed']['id'];
        $json .= json_encode($breed) . ",";
    }
    $json = substr($json, 0, strlen($json)-1);

    $json = '{"ResultSet": {"totalResultsAvailable":"' . $totalResultsAvailable .
                                    '","totalResultsReturned":' . $totalResultsReturned .
                                     ',"firstResultPosition":1,"Result": [' . $json . ']}}';

    return $json;
}

View Header

Include these css/js files:

http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete.css

http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js

http://yui.yahooapis.com/2.5.2/build/get/get-min.js

http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js

http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js

http://yui.yahooapis.com/2.5.2/build/json/json-min.js

http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js

View

    label for="breed">Breed
        input id="breed_id" type="hidden" name="breed_id" />
        input id="breed" type="text" name="item" maxlength="50"/>
        div id="breedContainer">

    script type="text/javascript">
        var mySchema = ["ResultSet.Result","Name","ID"];
        var myDataSource = new YAHOO.widget.DS_XHR("/find_a_pet/breed", mySchema);
        myDataSource.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;
        var myAutoComp = new YAHOO.widget.AutoComplete("breed", "breedContainer", myDataSource);

        // populate hidden field (id)
        function fnCallback(e, args) {
            YAHOO.util.Dom.get("breed_id").value = args[2][1];
         }
        myAutoComp.itemSelectEvent.subscribe(fnCallback);

        //myAutoComp.forceSelection = true;
        //myAutoComp.useIFrame = true;

Controller

// directly execute... /find_a_pet/breed?query=labr
function breed() {
    $this->layout = null;
    $query = (ctype_print($_GET['query'])) ? $query = $_GET['query'] : $query = '';
    $this->set('breed', $this->FindAPet->getBreed($query));
}

Missing data in beforeValidate()

If you are submitting a form and the data is not visible in model::beforevalidate(), then you can solve this by adding $this->Model->data = $this->data in the controller before validates(). Once you do this you can use $this->data in beforevalidate().

function admin_add() {
    if (!empty($this->data)) {
        $this->FindAPet->data = $this->data;
        if ($this->FindAPet->validates()) {
          $this->FindAPet->save();

Be Sociable, Share!

•