Examples of Using the Autocompletion Mechanism

Now that you understand how to use and manage suggestion lists, let’s create some scripts that implement the autocompletion mechanism.

Specifying the Width of the List of Suggestions

jQuery UI itself calculates the width of the list of suggestions based on its content. However, it may be useful to specify the width of the list manually. In this example, we set the list of suggestions to 400 pixels wide (see Figure 9-4):

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<h3>Enter the name of the book:</h3>
<input id=book />


// array of items to be proposed in the list of suggestions
var books = ["Web development with J2EE", "Practical CSS & JavaScript",
             "Practical Ruby on Rails", "Introduction to HTML & CSS",
             "jQuery UI"];

$("input#book").autocomplete ({
  source : books,
  open : function (event)
    var $ul = $(this).autocomplete ("widget");
    $ul.css ("width", "400px");


The list corresponds to the <ul> (created automatically by jQuery UI when using the autocomplete (options) method). It was explained earlier that it was easier to retrieve it using the autocomplete ("widget") instruction.

Once this <ul> element is recovered (through its jQuery class object), simply resize it using the css () instruction. This can be done only when the list will be displayed, hence the use of the ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.