Using jQuery Autocomplete with Lasso

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.

This article gives several examples of how to use jQuery’s Autocomplete feature with both a simple list of selections (in a static Javascript array) or using a database lookup. Also included is working code for a PHP example from another site. If you would like to get autocomplete working on your site, this article is for you. Or if you know or are interested in Lasso vs. PHP coding styles, this might provide a good example. This article’s intended audience is web developers.

Tools Needed

You will need a good code editor. I work on a Mac, and my code editor of choice is BBEdit. It is also helpful to have some way to examine traffic between the browser and the server on a low level. I use Firefox as my default browser. The Firebug plugin for Firefox  is invaluable for seeing what is happening with AJAX requests, which is the way this code functions. In the case of a page that does a database lookup, by using Firebug you can see the data returned from the lookup page in its raw form. If you make a mistake in modifying the files, the Javascript or data probably will be invalid and nothing will happen at all. This can be quite frustrating, as there are few clues as to what might be wrong. Firebug gives you an idea about what is happening.

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

On the web page that the user calls there is a Javascript running. When the user types into an input box, the Javascript intercepts the keystrokes (based upon a minimum number of keystrokes set in the Javascript), then does an AJAX query (a behind-the-scenes query) to a database to get a web page fragment. This fragment is then used to build the popup menu of terms.

Installing the Examples

  1. Download the example files from the Resources link at the bottom of this article.
  2. Copy everything to the root of your webserver.
  3. Put the contents of the LassoStartup folder to your server’s LassoStartup and restart Lasso.
  4. Set up a database called whatever you want, then load the projects.sql file to create a projects table.
  5. Enable Lasso Security for the new database.
  6. 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)

The Lasso Simple example contains a file called autocomplete.lasso. This example builds a list of project names from the database. By a “simple” example we mean that this lookup creates a simple Javascript array, which is an array containing only one field that can be used for autocomplete. This might be useful for a name field or possibly an address or city.

The “simple” example queries the database and builds an array in-place, it does not use an AJAX call to an external lookup page. To see what it does, load the page and look at the source code. You should see a Javascript array with your data.

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.

Conclusion

Autocomplete is a great feature that can be added to your website to enhance the user experience. Hopefully you find these working examples helpful.

Resources

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.

2 Responses to “Using jQuery Autocomplete with Lasso”

  1. peterbata says:

    Hello and thank you for all the work that you do. Here is the error message that I receive when attempting to un-rar your “autocomplete” download:

    ! C:\Documents and Settings\Administrator\Desktop\Autocomplete.zip: Cannot create Autocomplete\PHP_Simple\Using jQuery UI’s Autocomplete to Populate a Form | AF-Design.webloc
    The filename, directory name, or volume label syntax is incorrect.
    ! C:\Documents and Settings\Administrator\Desktop\Autocomplete.zip: Attempting to correct the invalid file name
    ! C:\Documents and Settings\Administrator\Desktop\Autocomplete.zip: Renaming Autocomplete\PHP_Simple\Using jQuery UI’s Autocomplete to Populate a Form | AF-Design.webloc to Autocomplete\PHP_Simple\Using jQuery UI’s Autocomplete to Populate a Form _ AF-Design.webloc

  2. Looks like it is complaining about the apostrophe in the filename. Try getting rid of that and uncompressing.

Leave a Reply

You must be logged in to post a comment.