Zend Jquery Autocomplete populate from Database

Question

Hi I am trying to implement a autocomplete field using Zend Jquery. I followed a tutorial to grab the data from an array and I have extended the code to access the data from my mysql table.

IndexController.php

$this->view->autocompleteElement = new ZendX_JQuery_Form_Element_AutoComplete('ac');
    $this->view->autocompleteElement->setLabel('Autocomplete');
    $this->view->autocompleteElement->setJQueryParam('source', '/index/city');

This calls the cityAction()

public function cityAction()
{
    $results = Application_Model_City::search($this->_getParam('term'));
    $this->_helper->json(array_values($results));        
}

I then call the Model City

public static function search($term)
{
   $region = new Application_Model_DbTable_Regions();

   $results = $region->getRegion($term);

   return $results;

}

And finally the Regions db model

public function getRegion($term)
{

    $select = $this->select()->from($this,'City')
                                 ->where('City LIKE ? ',$term.'%');


    return $this->fetchAll($select)->toArray();

}

Now when I go the autocomplete field it shows the results but as UNDEFINED , I think its something to do the way I am send the data back to the json helper.

I used firebug and I can see the data is been pulled in the following format.

[{"City":"London"},{"City":"Londonderry"},{"City":"Longfield"},{"City":"Longhope"},{"City":"Longniddry"}]

I think this format is incorrect, please any body dealt with this before?

Cheers

J

Community · Accepted Answer · 2020-06-20 09:12:55Z

The ZendX_JQuery_Form_Element_AutoComplete element is a proxy to the AutoComplete View Helper, which is a proxy to the jQuery UI Autocomplete widget.

If you read the overview on the jQuery UI Autocomplete page, you will note:

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

So, the JSON you are returning to the autocomplete should be structured more like:

[{"label":"London","value":"London"},{"label":"Londonderry","value":"Londonderry"},{"label":"Longfield","value":"Longfield"}]

Good luck!

John Jones · Accepted Answer · 2011-07-24 13:56:41Z

0

Fixed the problem afters hours of pain!

I modified the below code where it accesses the data

public function getRegion($term)

{

$select = $this->select()->from($this,'City')
                             ->where('City LIKE ? ',$term.'%');


return $this->fetchAll($select)->toArray();

}

I added a line of SQL City AS Value

public function getRegion($term)

{

$select = $this->select()->from($this,'City AS value')
                             ->where('City LIKE ? ',$term.'%');


return $this->fetchAll($select)->toArray();

}

This seems to have worked!

Cheers

J

answered Jul 24, 2011 at 13:56

John Jones

2,3252 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Zend Jquery Autocomplete populate from Database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related