Choose your database:
AnySQL
MySQL
MS SQL Server
PostgreSQL
SQLite
Firebird
Oracle
SQL Anywhere
DB2
MaxDB

Subscribe to our news:
Partners
Testimonials
Patrick Biegel: "Thanks a lot for your fast reply and the great solution! It works now and that's really important! The PHP Generator for MySQL is a great software".
Steve Morton: "First let me thank you for making this application Free. Best deal I have ever see for what it does".

More

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 combo boxes 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 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.

 

Levels

Use this tab to select tables 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.

 

Example

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