搜索框字符自动补全

jQuery Autocomplete

jQuery Autocomplete插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。

我用的是别人在Autocomplete插件基础之上改造的一个插件。

链接

从上面链接下载代码即可。

具体代码

使用之前引入jQuery文件，我使用的是jquery-3.6.0.min.js。

css和js代码就是上面链接中下载的代码。

需要注意的是：

• 为了防止前端发送过多请求到后端，必须使用JavaScript函数节流来限制发送请求的数目。
• 以上的数据是提前在前端用数组保存的，如果想要及时地传递数据，就要用到AJAX异步从前端发送数据到后端，然后后端将数据封装好再返回到前端。

JavaScript函数节流

概念：限制一个函数在一定时间内只能执行一次。

如果不做函数节流的话，可能会造成程序运行速度降低，甚至卡死崩溃。重复的AJAX请求也可能导致数据混乱，造成网络拥塞。

代码：

function throttle(method,delay,duration){
    let timer=null, begin=new Date();
    return function(){
    	let context=this, args=arguments, current=new Date();
    	clearTimeout(timer);
    	if(current-begin>=duration){
    		method.apply(context,args);
    		begin=current;
    	}else{
    		timer=setTimeout(function(){
    			method.apply(context,args);
    		},delay);
    	}
    }
}

然后对键盘按键松开事件调用函数：

window.onkeyup = throttle(check,100,200); // check函数是调用ajax请求

AJAX请求

具体可以看我的这篇文章。

我的js部分代码具体实现如下：

<script th:inline="javascript">
    let data = []; // 保存从后端传递过来的数据
    let autoComplete = new AutoComplete('subTitle','auto',data);

    function check() {
        let subTitle = document.getElementById("subTitle").value; // 搜索框中的内容
        if (subTitle != null && subTitle !== "" && typeof (event) != "undefined" && event.keyCode !== 13 && event.keyCode !== 38 && event.keyCode !== 40) {
            // ajax请求
            jQuery.ajax({
                url: "/user/findSubtitlesByName",
                type: "post",
                async : false,
                data: {
                    "subTitle": subTitle
                },
                dataType: "JSON",
                success: function(data) {
                    autoComplete.value_arr = data;
                },
                error: function(errorMsg) {
                    console.log(errorMsg);
                }
            });
        }
        autoComplete.start(event);
    }

	// 函数节流
    function throttle(method,delay,duration){
        let timer=null, begin=new Date();
        return function(){
            let context=this, args=arguments, current=new Date();
            clearTimeout(timer);
            if(current-begin>=duration){
                method.apply(context,args);
                begin=current;
            }else{
                timer=setTimeout(function(){
                    method.apply(context,args);
                },delay);
            }
        }
    }

    window.onkeyup = throttle(check,100,200);
</script>

实现效果