Choose your database:
MS SQL Server
SQL Anywhere

Subscribe to our news:
Peter Robinson: "As a tech savvy company director, I wanted an inexpensive web based database application to manage all aspects of my business. As with most humans I find developing purely by CLI very hard and do not have the will or time to invest in improving my skills. I was looking to find a nice human friendly GUI to design and build my application, which is when I came across PHP Generator for MySQL.

Whilst you still need a great understanding of logic and a small amount of programming ability to get the specific results you require, I am very happy with the speed of progress I have been making with this invaluable tool.

With all the standard libraries included, this product makes normal requirements such as JavaScript form validation, lookup selectors, on click events, auto complete, detailed searches, multiformat exports, rss feeds and username security straight forward and quick.

Having any changes made via the GUI written to the web server at the click of a button makes testing out ideas quick and easy without fear of breaking your application.

To conclude, I couldn't find any other product on the market that came close to offering the amount of options this does, and I do hope that more products like this come out in the future, with the hope of eventually eradicating the need to program all together".

Craig Cordell: "The simplicity of your code generator is fantastic. We've evaluated dozens of others over the past few years but have yet to find one that is as easy to use as yours".


Add your opinion

PHP Generator for MySQL online Help

Prev Return to chapter overview Next

Multi-level autocomplete editor

Select this control to create cascading dynamic comboboxes to get greater control over data input, and to make things easier for the user. Multi-level autocomplete editor is a series of 2 or more dynamic combo boxes in which each combo box is filtered according to the previous combo box. The number of levels is not limited. Live Demo.


Note: regardless of the number of levels the result of the multi-level editor is only a single value.


The picture below demonstrates two-level and three-level autocomplete editors. On the first figure, the City combo box is populated on the fly with city names that correspond to the currently selected country from the Country combo box. On the second figure, to specify an address a user needs to select a country, then select a city from a combo box populated with names of cities located in the selected country, and after that he can select an address from the list of addresses related to the currently selected city.



To create cascading combo boxes with any number of levels, use the same technique as described below.


Database schema requirements

To create an N-level autocomplete editor you need to have N+1 tables: the source table for the generated webpage and N tables each of them refers to the primary key in the previous table. The foreign key constraints are not required but highly recommended to enforce the referential integrity at the database level.


The picture above demonstrates a two-level editor represented on an Address webpage and allowing to specify a city using a list of countries. To create this control we used three tables: Country, City, and Address. Address is the source table for the webpage. The Address table refers to the primary key of the City table and City refers to the primary key of Country.



Use this tab to select data sources to be used for additional combo boxes, specify captions for these combo boxes, and columns which data will be displayed in the drop-down lists. Place tables in the reverse order of logical priority. In the example of three-levels editor we used Country, City, Address, and Customer tables. Customer is the source table for the generated webpage. Pay attention that the data entry order would be Country, City and then Address; which by data hierarchy standards is backwards. So we need to add Address first, then specify City and after that Country.


The Filter Condition property allows you to restrict number of displayed values. Variables like %CURRENT_USER_ID% are allowed.





Let's consider how to implement a three-level editor. Suppose we have the following tables:



Our goal is to create a three-level editor like this.



1. Open the editor of the page based on the Customer table, select the Address_id column, and specify its lookup properties. If you have a foreign key relationship and the Setup lookup by foreign key option is enabled, these properties are set automatically.



2. Select Multi-level autocomplete editor as edit control and click the ellipsis button to open the Edit properties dialog



3. As we've written above, the tables for additional combo boxes are placed in the reverse order of logical priority. The data entry order would be Country, City and then Address, so we need to add Address first, then specify City and after that Country. To add a new level for the control, click Add level and specify options of the Add filter dialog as follows:



4. Add the next level in the same way:



Click OK in the Edit properties window to save all settings and return to the Page Editor.


Max width

Use this property to restrict the maximum width of the editor (this means that in any screen resolution editor's width will be less or equal then the property value). Can be specified in any units supported by web browsers e.g. 300px, 25em, 50%, etc.


Allow clear

Turn it ON to allow end users to clear the selected value using special button.


Minimum input length

Use this option to specify minimal amount of symbols to start the search (useful for large lookup datasets where short search terms are not very useful).


Number of values to display

Defines the number of lookup values to be displayed in the drop-down list for each level.


Inline styles

Use this field to set formatting options to be used inside the <style> tag of the element. For example, to set the font color and the background color for a control, place the following string to Inline styles:


color: red; background-color: yellow;


Custom attributes

This property allows you to add simple metadata to individual elements, largely for the purpose of providing information to make JavaScript functions easier. Such attributes can be later handled in client-side events. For example, to add several custom attributes to an editor, enter the following string into the Custom attributes edit box:


data-city="Boston" data-lang="js" data-food="Bacon"


It is recommended to prefix all custom attributes with data- to keep the result document compatible with the HTML5 requirements.


Formatting functions

Use these functions to format search results and the selection. For example, it is possible to use fonts, colors, images, and so on. All you need is to specify two functions in JavaScript each of which accepts the current item as a parameter and returns the HTML code to represent search results and the selected item accordingly. Formatting functions can be specified at the level basis. The screenshot below is from our demo application:

Prev Return to chapter overview Next