Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Hermann

Instant Dropdown Ajax Autocomplete Search

Recommended Posts

Hi there everybody.

 

I've only recently started experimenting with the Yii framework and must say that I'm loving it. I have however run into a slight dilemma which I just can't seem to figure out. I must admit that my javascript (jQuery) knowledge probably isn't up to scratch but I would prefer to make that part of my Yii learning experience.

 

The problem:

 

I want to include a search function in my header. This search function should behave exactly the same as a normal autocomplete dropdown textbox and the values of autocomplete options should be retrieved from two or more MYSQL database attributes (In this case I want to have a table for products and this one autocomplete field should enable me to search for product matches via the product_name, product_serial and product_color attributes).

 

I have gotten a database search to work from http://www.yiiframework.com/extension/database-live-search/ . This however does a render_partial to a part of the page whereas I want possible results to be represented as a dropdown list.

 

 

I would like to be able to click on one of the dropdown options and then go to this option specific page content after clicking a search button or perhaps if clicking on the specific option.

 

To illustrate, I want to build a search box similar to that of Amazon.com (now by no means am I aiming to build such a complex underlying system, but this is just the idea of what I want to do.)

http://www.amazon.com/

 

 

Now like I said I want to search through multiple attributes within my table. Ex. if I search for the string 'red', product_name, product_serial and product_color attributes will be scanned for all of the entries containing this string and if none are found the a sorry message will be displayed on the dropdown.

 

 

BTW. I'm mainly using the Bootstrap extension for my UI if it might be of any additional help in building a typeahead or search form.

 

 

 

Please if anybody can give me some assistance or point me to some sort of tutorial that will help me master this problem as it is really important to me to be able to do it exactly in the way described above!

 

 

Thank you very much in advance.

 

Kind regards,

Hermann.

Share this post


Link to post
Share on other sites

I did find the following, which may be the easiest solution:

http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete

 

If you'd prefer to go with standard JS/jQuery to handle this though, then probably the simplest solution is to use the Autocomplete widgets built into the jQuery UI (which is what the above Yii class uses as well):

http://jqueryui.com/autocomplete/

 

I've never used the widgets myself though, and looking at the documentation, it would seem that the widgets are only for the front end, so you will still have to code the back end, which is where Ajax actually gets the data from the DB, separately. Luckily, jQuery has a fairly simple interface for making Ajax requests as well.

 

I've made a few fully-fledged autocomplete drop-downs before from scratch. Here's the general approach I would take in your situation if you decide to code things yourself:

 

1) Put indexes on the product_name, product_serial and product_color columns in your DB table(s). This will make the necessary SELECT statements a lot faster.

 

2) Set up a JS/jQuery onkeydown event handler for the search box. Before doing anything else, make sure that every time a character is pressed, the entered string is being correctly received by the function referenced by the onkeydown event handler.

 

3) I wouldn't necessarily make an Ajax call every time an onkeydown event fires. This will put a huge strain on your system. Some things you might want to do is not make any Ajax requests until at least 2-3 characters have been entered and/or don't make any requests unless a certain number of milliseconds have passed since the previous onkeydown event fired.

 

4) Once you're ready to make an Ajax request, use the jQuery ajax method (or whatever) to send a request to a PHP script that will take the entered string and perform a search on the desired DB columns.

 

5) Return the query results to the JS side in whatever format you wish. I'd recommend using either JSON format or some custom and simple format that you can handle very easily.

 

6) On the JS side, turn the data received from the Ajax request into an array of the proper structure. To do this, you'll need to read the documentation about the jQUery UI Autocomplete widgets to know exactly what format the array needs to be in.

 

7) Feed your properly-formatted array to the jQuery UI Autocomplete widgets and have them display your results in a logic autocomplete drop-down.

 

8) Use CSS to style the autocomplete results as you desire.

 

I think that's enough to get you started.

If you get stuck again, please let us know.

Thanks.

Share this post


Link to post
Share on other sites

Thank you very much for the reply. I have tried and failed the entire day (from South Africa so its nighttime over here already ). I have however found an extension that basically does what I want but I'm struggling with its implementation.

 

The extension can be found here: http://www.yiiframework.com/extension/select2/#hh1

 

A demo can be found here: http://ivaynberg.github.com/select2/#documentation Please see the "

Loading Remote Data" section.

 

 

Now this is exactly what I want to do. With the images etc. I just want to add a search button that would allow users to navigate to a specific unit or category.

 

 

According to Documentation this code needs to be entered into view file in order to use data from model:

 

// Working with model

<?php $this->widget('ext.select2.ESelect2',array(

'model'=>$model,

'attribute'=>'attrName',

'data'=>array(

0=>'Nol',

1=>'Satu',

2=>'Dua',

),

);

The problem is (as mentioned earlier) My AJAX skills aren't on standard at all. I would thus really appreciate some help on executing an AJAX request whilst user is typing into the specific field i.e. returning key:value array to above data parameter via AJAX.

 

I assume this will be done in the specific controller?

 

Thank you for the help thus far!

Share this post


Link to post
Share on other sites

I also thought that it would be more useful to have a categories dropdown limiting these AJAX requests to only a certain category with the default value being all. Thus a search possible values will only come from one attribute but it will be limited by values indicated in another attribute.

 

Ex.

 

1)Table (named dog) with Attributes: id, name, size and image (which is a path to image file)

2) model, and CRUD functionality generated via gii

3)User of site should be able to select between small, medium and large in the categories dropdown or all sizes will be scanned as a default

4)User of site will search via name and autocomplete will dropdown as in example in previous post (all the possible names with picture on the left)

5) User mouse-clicks on the item he wants and field gets filled with the name value.

6) User now mouse-clicks search and a table search is done with the key array value (this value should be the id attribute from the table represented by the specific name chosen)

 

 

 

I hope this is a clear enough explanation. I have been able to achieve most of the other functionality of my practice site using Yii but this seems to be above my skill level. My next project would definetely be to maste jQuery and AJAX etc thus enhancing my Yii experience.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...