Question

ff示例来自http://jqueryui.com/autocomplete/

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <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
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


</body>
</html>

从这个例子中我想在我的ASP.NET项目中应用它。

我担心的是，是否可以将“availableTags”的内容放入代码后面的变量中？如果是，那么我如何将它连接到这个代码来完成同样的事情呢？

感谢您的帮助。

谢谢！

Answer 1

ASPX页面的脚本部分：

<script>
$(function() {
  var availableTags = [
    <%= GetAvailableTags() %>
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});
</script>

代码背后：

public string GetAvaliableTags()
{
    var tags = new[] { "ActionScript", "Scheme" };
    return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x)));
}

GetAvailableTags()函数的输出将在渲染时直接写入页面。

当然，这是一个“快速而肮脏”的解决方案。例如，如果您的自动完成项目包含引号等特殊字符，则必须采用不同的方法。

Answer 2

您可以使用ASP.NET AJAX页面方法作为通过jQuery调用的服务器端管道来检索availableTags的列表，如下所示：

<script>
    $(document).ready(function() {
        $("#tags").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "YourPage.aspx/GetAutoComplete",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {

                    }
                });
            }
        });
    });
</script>

现在在YourPage.aspx的代码隐藏中，创建页面方法，如下所示：

[WebMethod]
public static string[] GetAutoComplete()
{
    return new[]
    {
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    };
}

使用JQuery for ASP.NET自动完成

2 个答案: