jquery.autocomplete-优快云博客

本文链接：https://blog.youkuaiyun.com/raynordlkk/article/details/6446037

本文介绍了一种使用jQuery插件实现网页输入框自动补全功能的方法。通过配置选项，如最小字符数触发、最大显示条目数及数据类型等，确保了良好的用户体验。解析JSON数据并格式化为建议项，使用户能够快速找到所需条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
     <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.autocomplete.js"></script>
    <script type="text/javascript">
   $(document).ready(function()
     {
        var acOptions =
        {
        minChars: 1,
        max: 100,
        dataType: 'json',

extraParams: //这里可以带参数. 如：key : function(){return key.value;s}

{
format: 'json'

        },
    parse: function(data) {
     // alert(data);
        var parsed = [];
        for (var i = 0; i < data.length; i++) {
            parsed[parsed.length] = {
                data: data[i],

         //返回的json数据：{["kindname":"a"},["kindname":"b"]}
                value: data[i].kindname,
                result: data[i].kindname
            };
        }
        return parsed;
    },
    formatItem: function(item) {
        return item.kindname;
    }
};

      $("#Text1").autocomplete("Default.aspx",acOptions);
});

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Text1" type="text" /></div>
    </form>
</body>
</html>