O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 />

<script>

// 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");
  }
});

</script>

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required