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