1、Autocomplete的属性
首先引入css和js文件，以及对应的HTML代码如下：
<link href="../css/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="../js/jquery-ui.js" ></script>
<label for="language">搜索：</lable>
<input id="language" name="language" type="text">
对应的后端java代码如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//前端发送的参数
String param= request.getParameter("term");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
List<String > namelist=new ArrayList<>();
namelist.add("a");
namelist.add("b");
namelist.add("c");
namelist.add("d");
String[] arr={"Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German"};
//将数组或者集合对象转换成json返回到前端
PrintWriter printWriter=response.getWriter();
printWriter.print(JSONArray.toJSON(arr));
printWriter.flush();
}
主要有以下几个属性
autoFocus: true ,//默认值为false。如果设为true，在菜单显示时，将默认选中第一项。
delay: 300,//默认值为300。指定在按键发生后多少毫秒后才触发执行自动完成。
disabled:false,//默认值为false。是否禁用自动完成功能。
minLength: 0 //默认值为 1。指定触发自动完成的最小输入字符数，如果输入的字符小于该长度，将不会触发自动完成功能。将该值设为0，可以在不输入字符的情况下显示菜单(根据实测显示，可能需要通过上下方向键来触发)。
对应的js代码如下：
$("#language").autocomplete({
source: "/Autocomplete.html",
autoFocus: true ,//默认值为false。如果设为true，在菜单显示时，将默认选中第一项。
delay: 300,//默认值为300。指定在按键发生后多少毫秒后才触发执行自动完成。
disabled:false,//默认值为false。是否禁用自动完成功能。
minLength: 0 //默认值为 1。指定触发自动完成的最小输入字符数，如果输入的字符小于该长度，将不会触发自动完成功能。将该值设为0，可以在不输入字符的情况下显示菜单(根据实测显示，可能需要通过上下方向键来触发)。
});
2、Autocomplete的事件
$("#language").autocomplete({
source: "/Autocomplete.html",
minLength : 0,
//当输入框内容发生改变时触发次函数,event 是当前事件对象
change: function( event, ui ) {
// alert(ui.item.value);
},
close: function( event, ui ) {
// event 是当前事件对象
//alert("close");
// ui对象是空的，只是为了和其他事件的参数签名保持一致
},
create: function( event, ui ) {
// event 是当前事件对象
// alert("create");
// ui对象是空的，只是为了和其他事件的参数签名保持一致
},
focus: function( event, ui ) {
// event 是当前事件对象
// alert(ui.item.value);
console.log(ui.item.value);
// ui对象仅有一个item属性，它表示当前获取焦点的菜单项对应的数据源对象
// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
//取消该事件的默认行为( event.preventDefault() )，可以阻止输入框的值被更改，但不会阻止菜单项获得焦点。
event.preventDefault();
},
open: function( event, ui ) {
// event 是当前事件对象
// alert("open");
// ui对象是空的，只是为了和其他事件的参数签名保持一致
},
response: function( event, ui ) {
// event 是当前事件对象
// $(event).val( "df");
// ui对象仅有一个content属性，它表示当前用于显示菜单的数组数据
// 每个元素都是具有label和value属性的对象
// 你可以对属性进行更改，从而改变显示的菜单内容
},
search: function( event, ui ) {
// event 是当前事件对象
console.log("fd");
// ui对象是空的，只是为了和其他事件的参数签名保持一致
},
select: function( event, ui ) {
// event 是当前事件对象
console.log(ui.item.value);
// ui对象仅有一个item属性，它表示当前被选中的菜单项对应的数据源对象
// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
}
});
其中还可以单独的绑定事件：
//当输入框内容发生改变时触发次函数
$( "#language" ).on("autocompletechange", function( event, ui ) {
alert(ui.item.value);
} );
3、Autocomplete的主要方法：（Autocomplete的方法使用比较少）
close()：关闭智能提示选择框。
destroy()：销毁智能提示选择框，将其所产生的元素完全删除，使其恢复至初始状态。
disable()：禁用自动完成功能。
enable()：开启自动完成功能。
$( "#language" ).autocomplete( "disable" );
$( "#language" ).autocomplete( "enable" );
$( "#language" ).autocomplete( "search", "Chin" );