jquery ui autocomplete needs additional function

Question

I have such autocomplete code:

$("input#PickupSpot").autocomplete({
  source: function(request, response){
     $.ajax({
        url: "AjaxSearch.aspx",
        dataType: "jsonp",
        data: {
           a: "getspots",
           c: "updateSpotList",
           q: request.term
        },
        success: function(){
           alert("Success");
        },
        error: function (xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(thrownError);
        }

     });
  }

});

When i try to get data Firebug shows an error: "updateSpotList is not defined". I need to creat a function called updateSpotList to get response from the server. And the success alert is never invoked.

Why do i need this function? Maybe there are something defined in aspx? It is:

string response = "";

 string callback = Request.QueryString["c"];
 string action = Request.QueryString["a"]; 
 string query = Request.QueryString["q"];

  //Ensure action parameter is set
  if(action != null && action.Equals("getspots")){
        //Ensure query parameter is set
        if (query != null && query.Length > 0){
            SpotListRequest request = new SpotListRequest
            {
                FreeText = query,
                Language = "sv-SE"
            };
            IEnumerable<Spot> spots = DataBridge.GetSpotList(null, null, query).OrderBy(i => i.FullName);

            JavaScriptSerializer js = new JavaScriptSerializer();

            string json = js.Serialize(spots.ToArray());

            //Ensure callback parameter is set
            if (callback != null && callback.Length > 0)
            {
                response = String.Format("{0}('{1}')", callback, json);
            }
        }
    }

MartinHN · Accepted Answer · 2010-12-21 07:36:29Z

1

You can specify a URL as the source parameter, instead of the data parameter.

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

The plugin will make a request to your server, and you should return a JSON array looking like this:

[{label: "Name"}, {label: "Name 2"}]

Change your JavaScript code to this:

$("input#PickupSpot").autocomplete({
  source: "AjaxSearch.aspx?a=getspots&c=updateSpotList"
});

The autocomplete plugin will append a parameter named term to the source URL, with the current value of the input element, so a request would be made to: "AjaxSearch.aspx?a=getspots&c=updateSpotList&term=test" if you wrote test in the input element.

On the server, you want to change q to term.

edited Dec 21, 2010 at 7:36

answered Dec 20, 2010 at 12:01

MartinHN

19.9k20 gold badges92 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

UngaBunga Over a year ago

if you mean change url to AjaxSearch.aspx?a=getspots&c=updateSpotList&q=request.term and remove data, then the problem persists.

MartinHN Over a year ago

I don't. Don't use data: Use source: AjaxSearch.aspx?a=getspots&c=updateSpotList Then it will automatically add the term to the URL.

UngaBunga Over a year ago

Thanks man, but this didn't solve my problem. If i use "source" request to server is not created at all, and if "url" then updateSpotList is needed as previous.

MartinHN Over a year ago

Try the code I just updated. Then you might need to change your response from JSONP, to a regular JSON Array.

UngaBunga Over a year ago

That's the hole problem - i can't change file at the server.

|

Collectives™ on Stack Overflow

jquery ui autocomplete needs additional function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related