自动完成jQuery不起作用？答案

【问题标题】：Autocomplete jquery not working?自动完成jQuery不起作用？
【发布时间】：2012-01-16 10:46:44
【问题描述】：

我有一个文本框，在里面我希望它自动完成。自动完成的数据将通过数据库提供。

这是我的 Jquery：

 var data = "autocompletetagdata.aspx"
    $("#item").autocomplete({
        source: data
    });

这是我现在放入 autocompletetagdata 的内容：

protected void Page_Load(object sender, EventArgs e)
{
    string term = Request.QueryString["term"];
   SqlConnection myConnection = new SqlConnection(connStr);
   myConnection.Open();
   string SQL = ("select Top 10 LTRIM(RTRIM(PGPRDC)) As PGPRDC FROM SROPRG SROPRG");
   SqlCommand myCommand = new SqlCommand(SQL, myConnection);
   StringBuilder sb = new StringBuilder();
   try
      {
        SqlDataReader reader = myCommand.ExecuteReader();
        if (reader.HasRows)
        {
           while (reader.Read())
           {
             sb.Append(reader.GetString(0))
                           .Append(Environment.NewLine);
            }
        }
        reader.Close();
      }
   catch (Exception ex)
   {
      myConnection.Close();
   }
   myConnection.Close();
       Response.Write(sb.ToString());  
//return "['word', 'hello', 'work', 'oi', 'hey']";     
    }

我做错了什么？

编辑：

 <script type="text/javascript" src="/scripts/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.flash.min.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.sifr.min.js"></script>
<script type="text/javascript" src="/scripts/js/global.js"></script>
<script type="text/javascript" src="/scripts/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="/scripts/js/orderstatus.js"></script>    
<script type="text/javascript" src="/scripts/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="/scripts/js/json_parse.js"></script>

当您在浏览器中转到 autocompletetagdata..aspx 时，您会回到屏幕上...

SC052 SC053 SC055 SC060 SC061 SC062 SC063 SG011 SG014 SG015

Firebug 也会在响应中显示这些项目被发回，但文本框没有任何反应

【问题讨论】：

autocompletetagdata.aspx 应该返回 JSON 编码数据，例如['SC052', 'SC053'] 等。这是 jQuery-ui 自动完成所期望的。

标签： c# jquery jquery-ui webforms jquery-ui-autocomplete

【解决方案1】：

这是 Jquery 代码：

$("#txt1").autocomplete({
    source: function (request, response){
        $.ajax({
            type: "POST",                        
            url: "YourAddress",           
            contentType: "application/json; charset=utf-8",
            dataType: "json",                                                    
            success: function (data) {
            response($.map(data.d, function (item) {
                return {
                    id: item.Value,
                    value: item.Text
                }
            }))
        }
        });
    },
    select: function (event, ui) {
        $("#hdnId").val(ui.item.id);//Put Id in a hidden field
    }
});

调用 ajax 请求并返回 JSON 数据，如下所示：

[{"Value":val1,"Text":"text1"},
{"Value":val2,"Text":"text2"}]

为了返回类似的东西，你必须定义一个这样的类：

public class Autocomplete
{

    private int val;
    private string text;

    public int Value
    {
        get
        {
            return val;
        }
        set
        {

            val = value;
        }
    }

    public string Text
    {
        get
        {
            return text;
        }
        set
        {

            text = value;
        }
    }
}

所以返回这个类对象的列表（List<Autocomplete>）就足够了。所以创建这个列表并用你的 sqlcommand 填充它，然后将它作为你的 XMLHTTPRequest 的响应返回

我测试过了，效果很好

祝你好运。Foroughi

【讨论】：

【解决方案2】：

好吧，我不确定这是否像我想的那样有效，但是： autocompletetagdata.aspx 可能正在显示数据，但是当您执行 source: data 时，数据还没有准备好，我的意思是它不包含数据。我通过在回调函数中填充 source 来解决类似的问题（这里是 autocompletetagdata.aspx 的回调）。

【讨论】：

【解决方案3】：

我有自动完成的问题。我到达这里是因为您包含 qtip。这两个库（jquery/autocomplete 和 qtip）在同时使用时都会出现问题。

【讨论】：