Autocomplete jquery not working?

Question

I have a text box, Inside I want it to be automatically completed. Data for automatic completion will be transmitted through the database.

This is my jQuery:

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

This is what I just entered in 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']"; } 

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 are returned to the screen ...

 SC052 SC053 SC055 SC060 SC061 SC062 SC063 SG011 SG014 SG015 

Firebug also shows that these elements are sent back in response, but nothing happens with the text box

Answer 1

This is the 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 the ajax request and return the JSON data like this:

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

to return somthing like this, you must define the class as follows:

 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 this is enough to return a list of these class objects ( List<Autocomplete> ). Create this list and populate it with sqlcommand and then return it as a response from your XMLHTTPRequest

I tested it. It works great.

Good luck .Foroughi

Answer 2

Well, I'm not sure if this works the way I think, but: autocompletetagdata.aspx can show data, but when you make a source: data , data is not ready, I mean that they do not contain data. I solve a similar problem by populating the source in the callback function (here is the autocompletetagdata.aspx callback ).

Answer 3

It seems your ASPX script is sending a new list of values ​​from the database to a new line. The autocomplete widget actually expects a JSON-encoded array of strings or objects. You can use the JsonTextWriter class to create JSON-encoded data. Code example:

 SqlDataReader reader = myCommand.ExecuteReader(); JsonTextWriter writer = JsonTextWriter(Response.Output); writer.WriteStartArray(); // we must send a "[" even if there is no data if (reader.HasRows) { while (reader.Read()) { writer.WriteString(reader.GetString(0)); } } writer.WriteEndArray(); // we must send a "]" even if there is no data reader.Close(); 

Answer 4

I have a problem with autocomplete. I came here because you enabled qtip. These two libraries (jquery / autocomplete and qtip) have problems using both.