JQuery UI之Autocomplete

Posted 2020-09-29 zhangjinru123

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