jquery autocomplete

最新推荐文章于 2025-06-27 16:14:11 发布

小鬼当家家

最新推荐文章于 2025-06-27 16:14:11 发布

阅读量745

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/xiaoguidangjiajia/article/details/53379330

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery UI的autocomplete插件实现输入框的自动填充功能。包括引用所需文件、解决常见错误及两种数据源（静态与动态）的配置方法。

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

使用jquery autocomplete完成自动填充功能。需要引用下面的文件，当然js版本不一定是这个：

 <script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")"></script>
  <link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery-ui.css")" />

当然网上也大多数都说需要引用jquery.autocomplete.js这个文件，但是测试发现(使用Chorme浏览器)，会出现JS错误：

Uncaught TypeError: Cannot read property 'opera' of undefined(…)

错误位置：jquery.autocomplete.js

$.browser.opera && $(input.form).bind("submit.autocomplete", function() {

使用方法：
1.使用静态数据:

<script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

2.加载动态数据：

$("#tags").autocomplete({

            source: function (request, response) {

                $.ajax({
                    url: '/xxx/xxx/xxx',
                    // 后台请求路径,mvc
                    dataType: "json",
                    data: {
                        "name": "test"//参数
                    },
                    success: function (data) {
                        data = $.parseJSON(data.Message);

                        response($.map(data, function (item) { // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数
                            return {
                                // 设置item信息
                                label: item.DisplayName,// 下拉项显示内容
                                value: item.DisplayName,   // 下拉项对应数值
                            }
                        }));
                    },
                    error: function (msg) {

                    }

                });
            },
            minLength: 1, 

        });