Configuring an Auto Complete Field

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Friday, May 4, 2012PrintSubscribe
Configuring an Auto Complete Field

Code On Time web application generator assigns Lookup item style to all foreign key fields.

'EmployeeID' field rendered as lookup in Code On Time web application

The Lookup item style has powerful searching and filtering capabilities, but may require several clicks to find a record. A speedy alternative to the lookup is the Auto Complete items style. The user types in a value in the field, and a list of matching field entries will be displayed.

Open the Project Designer. In the Explorer, switch to Controllers tab. Double-click on Orders / Fields / EmployeeID field node.

'EmployeeID' field from Orders controller in Code On Time Project Explorer

Change the following properties:

Property New Value
Items Style Auto Complete
Data Value Field EmployeeID
Data Text Field LastName

Press OK to save the field. On the tool bar, click Browse to generate the application.

When it opens in your default web browser, navigate to Orders page and edit an order. Click on the dropdown arrow, and you will see a list of all options.

Employee Last Name data field as auto complete showing full list of available options

Close the dropdown and type in the letter “d”. A list of matching employees whose last name start with “D” will appear.

Auto Complete results from typing in 'd' in 'EmployeeID' field

Now type “o”, and that list of employees will narrow down to those that have last names that start with “Do”.

Auto Complete results from typing in 'do' in 'EmployeeID' field

You can now hit Tab or Enter on the keyboard, or click on the list item, to insert it into the field.

Option selected from list of auto complete list items

If the entered text does not match to any items in the list, then the input field will revert to the original value.

Let’s make this field take less real estate on the users screen.

Switch back to the Designer. In the Project Explorer, double-click on Orders / Views / editForm1 / c1 – Orders / EmployeeID data field node.

EmployeeID data field in editForm1 view of Orders controller configured with Auto Complete items style

Change the following setting:

Property New Value
Columns 20

Press OK to save the data field, and click Browse on the tool bar.

Navigate to Orders page, and edit a record. The data field is now twenty characters wide.

EmployeeID data field is now 20 characters wide