Autocomplete creates the dropdown when something is typed into the input field.
Autocomplete is the feature of a website when you type something into a box and up pops a list of possible selections. Google has recently added this feature on its search page. Autocomplete can give your users a very nice, fast, AJAX-based method to do lookups.
You will also need a working installation of MySQL and Lasso Professional. This code uses a custom tag encode_json, which handles the JSON encoding of the data returned from the Lasso page back to the calling page. This code is tested on Lasso version 8.5.
How Autocomplete Works
Installing the Examples
- Download the example files from the Resources link at the bottom of this article.
- Copy everything to the root of your webserver.
- Put the contents of the LassoStartup folder to your server’s LassoStartup and restart Lasso.
- Set up a database called whatever you want, then load the projects.sql file to create a projects table.
- Enable Lasso Security for the new database.
- Change the Inline code to use the same database name that you set up.
Screenshot of the autocomplete simple example.
Autocomplete Simple Example (Lasso Code)
With Firebug running, check the response page. You won’t see any external calls, which is correct as it is all done within the original Lasso page.
If you want to also pull in an ID field or other fields from a database lookup, then you need to use the Database Lookup Example.
Screenshot showing the autocomplete lookup working.
Screenshot of the autocomplete database response. See the bottom half of the screen for the Firebug output showing the data being returned back to the calling page.
Autocomplete Database Lookup Example (Lasso Code)
The Database Lookup example builds a list of project names and IDs from the database. This would be pretty handy in any situation where you have a related table with IDs where you want to store the ID, and not the name field.
In this example, the names (or, more precisely, the label) is displayed in the autocomplete. When an entry is selected, the ID is populated to the ID form box. If you don’t want to display this, it could easily be changed to a hidden form field to make it less distracting to the user.
Run the example by loading “project_poc.html”. Try entering different three-letter combinations to see what autocomplete returns. With Firebug running, check the response page. You should see an external call to “project_lookup.lasso” which is a page that fetches records from the Projects table and builds the output that is then displayed by the original (calling) page.
See the screenshot (above) for an example of what correct data should look like.
Screenshot of a PHP version of autocomplete in action.
Screenshot of autocomplete PHP response page. See the bottom part of the screenshot for Firebug displaying the data being returned.
Autocomplete Database Lookup Example (PHP Code)
We have included a set of PHP files from Using jQuery UI’s Autocomplete to Populate a Form, which is a very nice description of how this works in PHP. These files are provided solely for comparison on how Lasso operates versus PHP.
Autocomplete is a great feature that can be added to your website to enhance the user experience. Hopefully you find these working examples helpful.
1. Download the Using jQuery Autocomplete with Lasso code for these examples. This should have all the files you need to run the examples.
2. jQuery Autocomplete can be built as a part of the jQuery UI. A prebuilt version is included with the code examples.
3. The PHP example was lifted from “Using jQuery UI’s Autocomplete to Populate a Form” and only minimally modified. Full credit to www.af-design.com. Check out that article for a full description of the PHP way of doing this.