jquery ui 自动完成需要额外的功能

Question

我有这样的自动完成代码：

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

     });
  }

});

当我尝试获取数据时，Firebug 显示错误：“updateSpotList 未定义”。 我需要创建一个名为 updateSpotList 的函数来获取服务器的响应。并且永远不会调用成功警报。

为什么我需要这个功能？也许aspx中定义了一些东西？这是：

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

Answer 1

您可以指定 URL 作为源参数，而不是数据参数。

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

该插件将向您的服务器发出请求，您应该返回一个如下所示的 JSON 数组：

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

将您的 JavaScript 代码更改为：

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

自动完成插件将附加一个将名为 term 的参数添加到源 URL，并使用输入元素的当前值，因此如果您在输入元素中编写了 test，则将发出请求：“AjaxSearch.aspx?a=getspots&c=updateSpotList&term=test” 。

在服务器上，您希望将 q 更改为 term。