Autocomplete jquery not working?

问题

I have a text box, Inside I want it to auto complete. The data for the auto complete is going to be given through the database.

This is my Jquery:

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

This is what I have put in autocompletetagdata for now:

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']";     
    } 

What am i doing wrong?

EDIT:

 <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>

When you go to autocompletetagdata..aspx in the browser you get back on the screen...

SC052 SC053 SC055 SC060 SC061 SC062 SC063 SG011 SG014 SG015

Firebug also does show these items being sent back in the response, but nothing happens to the text box

回答1:

This is Jquery Code :

$("#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
    }
});

call you ajax request and return JSON data something like this :

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

for return somthing like that you must define a class like this :

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;
        }
    }
}

so it just enough to return a list of this class objects (List<Autocomplete>).So create this list and fill it by your sqlcommand and then return it as response of your XMLHTTPRequest

I tested it.It works great man

Good luck.Foroughi

回答2:

Well I'm not sure if this works like I think but: autocompletetagdata.aspx may be showing data, but when you do source: data, data is not ready, I mean it dont contain data. I solve similiar problem by filling source in callback function (here, callback of autocompletetagdata.aspx).

回答3:

I have problem with autocomplete. I reached here because you include qtip. Those two libs (jquery/autocomplete and qtip) have problems when used both.

来源：https://stackoverflow.com/questions/8878878/autocomplete-jquery-not-working