jquery autocomplete

越学文
2023-12-01

使用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, 

        });
 类似资料:

相关阅读

相关文章

相关问答