Autocomplete Control with ZendX_JQuery
Description
Develop your own jQuery autocomplete control, using a country list, PHP 5.3 and anonymous functions.
Tags
AJAX, autocomplete, jquery, zendx, zendx_jquery
Browse Screencasts
- - AJAX
- - Doctrine
- - HTML / CSS
- - Logging
- - jQuery
- - Zend_Db
- - MVC
- - Unit Testing
- - About
- - Consulting
- - Support us
CC Attribution-NonCommercial-ShareAlike 2.5 Canada
Very Snazzy!
Sure its great tutorials …
Hi Jon ,
,
I am seeing my name in your Downloads folder
am i ganna see it online soon ???
just kiddin
tawfek
Very nice to see you using the model to fetch content that is not in a database.
Hi,
Very interesting and powerfull tutorial
Bravo.
Fabrice
It’s not only useful, it’s great, i’ve been waiting for this one. Thanks
Small piece of advice : the same one with the contents in a database would be awesome !!
Hey Jon.
I was using MySQL[Views] for display purpose instead of Tables.
Now the problem is to create a model we need to have primary key, and in views there can’t be one.
So My question is, is there any way to use mySql views in Zend Framework?
What I have done is, i got the DB resource defined in app.ini file, via bootstrap->getResource(‘db’), and then ran a sql statement using execute statement, and fetched in object mode. But in a very non elegant way.
So can there be a way to use Views just like we do with MySql Tables?
And one more question, but that I would throw after this one is solved
Hi Jon,
Are you plan to do a screencast about Zend_Form and ZendX_Jquery ?
It’ll be usefull to use the both to do a complete form with Ajax (to display errors, etc)
Thanks.
Fabrice
@Fabrice,
check the reated videos
@jon,
Thank you, but I saw all the (great) videos, but (maybe i’m wrong), there’s isn’t an example to use Zend_Form with ZendX_JQuery.
Fabrice
Hi
I’ve managed to use the autoComplete as you’ve demonstrated
one question tho is does the ZendX version allow for all the features the non Zendx flavour has?
like callback functions?
It is a great cast
, but it would be nice if you can show us how to do it retrieving data form database. I’ve tried but it doesn’t work, perhaps I’m missing something :S.
@Matt,
you should be able to run setJqueryParam with a variable that is indeed a function. Javascript doesn’t discern functions from variables, so if you create a function called “myCallback”, you should be able to set the success parameter to “myCallback” and it should fire.
this is just my assumption, as I haven’t actually tried it. Worse comes to worse, just right the jquery yourself and submit a feature request
Let us know how it goes!
Jon
@Conti,
take a look at the controller and see if you can extend it with some code from one of the videos about Zend_Db!
@conti
I am doing this using
$auto = new ZendX_JQuery_Form_Element_AutoComplete(‘foo’);
$auto->setJQueryParam(“url” ,”/AJAXt/autoComplete/Part/”.$value .”/”);
in the /AJAXt/autoComplete/ function
run the query to get the results and return them
$this->_helper->json($results);
Hi Jon,
Firstly, thanks for all your work putting these screen casts together!
when trying to load the project files i am receiving the following:
Warning: Cannot construct AutoComplete field without specifying Parameters Data and Url in /Applications/MAMP/htdocs/autocomplete/library/Zend/Form/Element.php on line 2010
Any ideas what the issue could be here?
thanks
Hello Jon,
thank you for the great tutorials!
I was wondering if it is possible to make the AutoComplete
look for results STARTING with the searchterm, instead of
all the results CONTAINING the searchterm?
Gr. Laurens
This is very nice.
But is it possible to move the javascript generated by Zend into a seperate file?
I could just copy the output of it, and save it myself, but how do I prevent Zend from adding it in the html again?
I don’t want the javascript to be in the html source..
@jon and @Matt
Tahnk you guys! I did not look at the format the results were given to me, which was this case:
{“0″:”item0″,”1″:”item1″,”3″:”item2″}
So I only needed to json the values of the array:
$this->_helper->json(array_values($results));
Now it works!
Hi,
How can I do that in a partial view in a layout :
partial(“/common/_search_engine.phtml”); ?>
I want to this on every page.
Regards
Fabrice
when i tried to implement this vedio , i mean i make a project uing the autocomplete like the video but an javascript error appears ( out of memory )
i am working on IE7
please any help ????:(
waw , it is greate tutorial
really thank you
Hi there! Great tutorial. Would it be possible to display some more information in the autocomplete list from another datasource, array, field or whatever…?
Like: City | Population
Thanks.
Just Great!
@Fabrice
I’d like to know that as well. When I use an autocomplete field in a file that I call with render or partial, the autocomplete field is rendered as a regular input field and nothing happens when I type in it.
any ideas anyone?
Great lesson. Thank you!
I spend 3 hours but i cannot fin a way to set
$this->view->addHelperPath(‘Zendx/JQuery/View/Helper’, ‘ZendX_JQuery_View_Helper’);
in bootstrap?
If I use JQuery on every page of the site. In every controller and in every action. Where should I place this code. You mentioned that we may consider to place this code in bootstrap. But I found in Google 20 ways of getting VIEW in Bootstrap but none of them have that method.
@Laurens
Not sure if you still need this, but others may find it useful. Here is my Model which is searching results from my DB and then returning only those values that START with the letter typed.
class Model_What {
public static function search($term)
{
$filter = function($terms) use ($term)
{
$pattern = “/^$term/i”;
if(preg_match($pattern,$terms)){
return true;
} else {
return false;
}
};
return array_filter(self::getTerms(),$filter);
}
public static function getTerms()
{
$terms = Model_Searchterms::getSearchTerms();
$categories = Model_Categories::getCategories();
foreach($terms as $term){
$allterms[] = $term['search'];
}
foreach($categories as $term){
$allterms[] = $term['categoryname'];
}
return $allterms;
}
}
@Sergey
Try
$view = Zend_Layout::getMvcInstance()->getView();
$view->addHelperPath(‘ZendX/JQuery/View/Helper’,'ZendX_JQuery_View_Helper’);
in your bootstrap.php file.
Now if only I could work out how to get the autocomplete working in my layout.phtml file… Anyone?
Great Tutorial!
But I would like to use the search function in the city model without any “php 5.3 magic” (so it should work with php 5.2) and then i would like to use a database query instead of the city-list in the model.
any ideas?
thanks in advance
Snazzy indeed!
I am struggling with setting the ‘select’ callback option so that I can do something interesting with the value that the user selects. I am doing $this->view->autocomplete->setJQueryParam(‘select’,'selectCallback’); the generated javascript is quoting like so
$(“#userlastname”).autocomplete({“source”:”\/admin\/users\/autocomplete-username”,”select”:”selectCallback”});
and I am wondering if the quotation is what’s preventing my callback from firing. There’s no enlightening error to be seen in my Firebug console. Has anybody figured this out?
Here’s an answer to my own question. A workaround is to add this
$( “.selector” ).bind( “autocompleteselect”, function(event, ui) {
// your function here
});
inside your jQuery()->onLoadCaptureStart()?> block in the view. Courtesy of http://jqueryui.com/demos/autocomplete/#event-select.
Hi, Thanks for the nice tut!!
I just wondered how can I filter the each record for nice drop-down view?
as an result from model_data::search I get:
“1 data1 desctiptionA”
“2 data2 desctiptionB”
“3 data3 desctiptionC”
etc…
if the data is too long the auto-complete drop down part is becoming longer than search box text area.
Can I some how get the geometry just to fit my data correctly? how to decorate the data inside the drop-down part?
Thanks, Arman.
Very easy solution mate!!!
Very helpful, clean and nice tutorial.
Thanks a lot.
video not working!!!!
Uncaught exception: TypeError: ‘$(“.media-player”)
.jmeEmbedControls’ is not a function
Error thrown at line 11, column 4 in () in http://www.zendcasts.com/autocomplete-control-with-zendx_jquery/2010/07/:
@fabrice @xaos
I had the same problem using autocomplete with my layout and I have solved it with the following:
- Use placeholder for my searchBox
- Create a Zend_Controller_Plugin that extends Zend_Controller_Plugin_Abstract
-in predispatch execute method renderUiWidgetElement of autocomplete element.
-set the placeholder with the form
Example:
class myLibrary_Controller_Plugin_SearchBox extends Zend_Controller_Plugin_Abstract
{
public function preDispatch()
{
$this->searchBox();
}
public function searchBox()
{
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper(‘viewRenderer’);
$viewRenderer->initView();
$view = $viewRenderer->view;
$searchForm = new Application_Form_JQueryForm();
$searchForm->acProduct->renderUiWidgetElement();
$view->placeholder(‘searchBox’)->set($searchForm);
}
}
The key is launch method “renderUiWidgetElement();”, without it, the layout will not add the neccesary javascript to the autocomplete element. I get this information from here:
http://cientouno.be/blog/categorie/zend-framework
Thanks a lot to cientouno!
Isma.
Thank you so much sir Jon!!
I really enjoyed this tutorial!
Jon, I have problems with this line in the model:
$filter = function(city) use ($term)
In php 5.3 like does he place?
Thank you for his help.
I was testing zendx jquery and i got stuck with their example, where the controller ajax function was using
$this->_helper->autoComplete(array(‘New York’,'Bonn’));
This was returning a new line separated string but the field was not regoznizing it, by using the json helper everything went ok, i still have to figure out why the autoComplete helper is not
compatible with the autocomplete text input.
Great and helpful tutorial, thanks!
hey nice tutorial and its working perfect
but my problem is that i want id with the search list and i need to store it in hidden field.
any idea how to this??
thanx in advance.
ankit
Thanks for this tutorial.
Someone can help me replace the textbox by a combobox, like this example:
http://jqueryui.com/demos/autocomplete/#combobox
Thanks.