12-为建议列表的显示营造特效

9.5.4　为建议列表的显示营造特效

默认情况下，列表会由jQuery UI立即返回并显示。然而，也可以在列表显示前营造一个视觉特效，如从上方缓缓下滑（ slideDown ）：

<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> 
// 建议列表中待匹配的数组项　
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.hide ().slideDown (600); 
 } 
}); 
</script>

这里我们使用 open 选项，它关联的是列表显示前调用的事件。在此之前，我们先使用 hide () 隐藏列表，以便为其添加缓缓下滑的显示效果。

由于输入框需要更新值，若是想在列表隐藏时使用视觉效果，则实现起来就要复杂多了。尽管效果可以正常呈现，但却使得所选列表项的值无法更新到输入框中。^①