JQuery autocomplete 使用手册

简介

JQuery autocomplete 是一款基于jQuery框架的自动补全插件，可以为输入框提供便捷的自动补全功能，节省用户的时间。本文将详细介绍该插件的使用方法，并提供两个示例。

安装

可以从官方网站(https://jqueryui.com/autocomplete/)下载插件文件，解压后将jquery-ui.min.css和jquery-ui.min.js复制到项目文件夹中，并引入。

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-ui.min.js"></script>

使用方法

1. 创建文本框和目标列表。

<input id="myInput" type="text">
<ul id="myUl"></ul>

1. 绑定自动补全事件。

$("#myInput").autocomplete({
    source:["JavaScript","Java","Python","C","C++"],
    open:function(event,ui){
        $("#myUl").empty();
        $("#myInput").removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close:function(event,ui){
        $("#myInput").removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    select:function(event,ui){
        $("#myInput").val(ui.item.value);
        $("#myUl").empty();
    },
}).autocomplete("instance")._renderItem=function(ul,item){
    return $("<li>")
        .append("<div>"+item.label+"</div>")
        .appendTo(ul);
};

示例1：基础使用

$("#myInput").autocomplete({
    source:["JavaScript","Java","Python","C","C++"],
});

示例2：自定义显示内容

$("#myInput").autocomplete({
    source:[{value:"JavaScript",label:"JavaScript(JS)"},
            {value:"Java",label:"Java(JAVA)"},
            {value:"Python",label:"Python(PY)"},
            {value:"C",label:"C(C)"},
            {value:"C++",label:"C++(C++)"}],
}).autocomplete("instance")._renderItem=function(ul,item){
    return $("<li>")
        .append("<div>"+item.label+"</div>")
        .appendTo(ul);
};

以上代码中，第一个示例演示了如何基础使用JQuery autocomplete插件，用一个字符串数组作为自动补全的数据源。第二个示例演示了如何自定义显示内容，用一个对象数组作为自动补全的数据源，显示内容为“名称(缩写)”。自定义显示内容需要通过重写_renderItem方法实现。