JQuery Autocomplete

最新推荐文章于 2025-07-09 13:40:33 发布

原创最新推荐文章于 2025-07-09 13:40:33 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#插件 #jquery

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JQuery Autocomplete插件实现输入提示功能。通过导入必要的JQuery和UI样式文件，设置Autocomplete方法即可让输入框具备联想提示功能。

JQuery Autocomplete插件

JQuery的Autocomplete插件主要根据输入的内容来查找和查询想要是内容，让用户快速的找到自己想要是内容。

展示：

先要导入插件：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

这样才能使用Autocomplete插件，来获取内容

<script>
    $(function(){
       var content = [
          "华",
           "华点",
           "华点信息",
           "欢迎来到华点",
           "华点信息科技园"
       ];
        $("#text1").autocomplete({
            source:content
        });
    });
</script>

这里通过设置autocomplete方法来获取上面的content里面的内容，在搜索时输入内容，就可以有提示信息出现。

在这里显示的结果是：