Formatting Content

The autocomplete () method creates a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.

In Figure 9-2, for example, the HTML generated by jQuery UI is modified by the autocomplete () instruction (the code was recovered using the Firebug extension in Firefox).

The <input> element is slightly modified, while the HTML now contains a <ul> corresponding to the list that appears below the input field. Each element of the list is a <li> with a ui-menu-item CSS class.

We can customize the display by editing the CSS classes with the addition of a <style> tag. For example, if we modify the ui-menu-item class associated with <li> elements, we can change the font used for the list of suggestions, as shown in Figure 9-3:

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

<style type=text/css>
  li.ui-menu-item {
    font-size : 12px;
    font-family : georgia;
  }
</style>

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

</script>

Figure 9-2. HTML code generated by the autocomplete () method

Figure 9-3. Customized ...

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.