Question

我使用以下代码进行自动完成功能，但我需要使用sql server 2008和C#，asp.net从数据库中获取值。

<!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.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/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>

如何使用（EF4和asp.net）

从我的数据库中获取该数组列表值

Answer 1

请参阅以下jQueryUI Autocomplete Example

中的示例

希望你能独自完成！

您需要做的就是调用某个页面或处理程序并准备JSON数据。

  $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "yourpage.aspx",
                dataType: "jsonp",
                data: {

                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

Answer 2

第一步是创建一个C＃ASP.Net页面，该页面生成一个自动完成插件可以解析的JSON结果。根据文档，您可以使用以下两种格式：

数组：数组可用于本地数据   有两种支持的格式：字符串数组：[“Choice1”，“Choice2”]
  具有label和value属性的对象数组：[{label：“Choice1”，value：   “value1”}，...]

http://api.jqueryui.com/autocomplete/#option-source

或者你可以使用一个函数来解析你需要的任何格式，但听起来最简单的解决方案将满足你的需求。

我将假设您正在使用ASP.Net表单，这些表单并没有真正针对这种情况进行调整，但您仍然可以通过一些调整来实现它。让我们在您的Web应用程序根目录中创建一个名为SearchResults.aspx的页面。

要做的第一件事就是清除ASPX文件中的所有内容，除了以下行：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchResults.aspx.cs" Inherits="ASP.Net_Forms.SearchResults" %>

然后您可以随意更改后面的代码以输出您喜欢的任何格式。在这种情况下，我们将在自动完成可以原生理解的结构中使用JSON。我们还需要设置响应类型。

public partial class SearchResults : System.Web.UI.Page
{
    private class SomeSearchableClass
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // The autocomplete plugin defaults to using the querystring
        // parameter "term". This can be confirmed by stepping through
        // the following line of code and viewing the raw querystring.
        List<SomeSearchableClass> Results = SomeSearchSource(Request.QueryString["term"]);

        Response.ContentType = "application/json;charset=UTF-8";

        // Now we need to project our results in a structure that
        // the plugin can understand.

        var output = (from r in Results
                        select new { label = r.Name, value = r.ID }).ToList();

        // Then we need to convert it to a JSON string

        JavaScriptSerializer Serializer = new JavaScriptSerializer();
        string JSON = Serializer.Serialize(output);

        // And finally write the result to the client.

        Response.Write(JSON);
    }

    List<SomeSearchableClass> SomeSearchSource(string searchParameter)
    {
        // This is where you'd put your EF code to gather your search
        // results. I'm just hard coding these examples as a demonstration.

        List<SomeSearchableClass> ret = new List<SomeSearchableClass>();

        ret.Add(new SomeSearchableClass() { ID = 1, Name = "Watership Down" });
        ret.Add(new SomeSearchableClass() { ID = 2, Name = "Animal Farm" });
        ret.Add(new SomeSearchableClass() { ID = 3, Name = "The Plague Dogs" });

        ret = ret.Where(x => x.Name.Contains(searchParameter)).ToList();

        return ret;
    }
}

最后只需更改你的jQuery即可使用正确的源代码：

$( "#tags" ).autocomplete({ source: "/SearchResults.aspx" });

如何使用asp.net在jquery中创建自动完成

2 个答案: