4006

Autocomplete jquery not working?

Question:

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

Answer1:

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

Answer2:

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

Answer3:

It seems like your ASPX script sends a new-line separated list of values from database. The autocomplete widget actually expects JSON encoded array of strings or objects. You can use <a href="http://msdn.microsoft.com/en-us/library/bb299886.aspx#intro_to_json_topic4" rel="nofollow">JsonTextWriter class</a> to create JSON encoded data. Example code:

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();

Answer4:

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

Recommend

  • What's the need of Informal Protocols?
  • Keeping the user's input intact when outputing to terminal at the same time
  • How can you tell if a Python program has anything to read from stdin?
  • Call a php script whenever an e-mail is received?
  • python: forcing relative imports to search from script file
  • Python 3.2.2, error(scripts to exe)
  • custom UITableViewCell with image for highlighting
  • jQuery ready not fired after rails link_to is clicked
  • Test if a set exists before trying to drop it
  • Meteor: Do Something On Email Verification Confirmation
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Fetching methods from BroadcastReceiver to update UI
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Modifying destination and filename of gulp-svg-sprite
  • Where to put my custom functions in Wordpress?
  • Symfony2: How to get request parameter
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • GridView Sorting works once only
  • RestKit - RKRequestDelegate does not exist
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • WPF Applying a trigger on binding failure
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Append folder name and increment by 1 using batch script
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal