使用JSON jQuery用户界面自动完成从URL

我使用jQuery UI的自动完成功能。我可以使用jQuery UI提供的示例进行操作，如下所示：使用JSON jQuery用户界面自动完成从URL

var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 

$("#tags").autocomplete({ 
    source: availableTags 
});

此工作没有任何问题。但我需要使用JSON作为谁可以这样检索我的数据源：http://mysite.local/services/suggest.ashx?query=ball

如果我要去那个网址我得到JSON回来这样的：

[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

我如何使用我的网址作为数据源？

我试图改变源选项是这样的：

$("#tags").autocomplete({ 
    source: "http://mysite.local/services/suggest.ashx" 
});

但它并不能帮助。我猜这个服务不知道在输入字段中输入了哪个关键字？

任何指针将是巨大的。

来源

2012-09-11 Kim Andersen

您需要更改源代码以符合以下规格（在documentation概述了小部件）。源必须是包含的阵列（或返回包含数组）：

简单的字符串，或：含有label属性
目的，一个value属性，或两者。

如果由于某种原因，您无法更改远程源返回的内容，则可以在数据成功检索后对其进行转换。这里是你会怎么做：

$("#tags").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://mysite.local/services/suggest.ashx", 
      data: { query: request.term }, 
      success: function (data) { 
       var transformed = $.map(data, function (el) { 
        return { 
         label: el.phrase, 
         id: el.id 
        }; 
       }); 
       response(transformed); 
      }, 
      error: function() { 
       response([]); 
      } 
     }); 
    }); 
});

正如你所看到的，你需要做的AJAX在一个函数传递给小部件的source选项调用自己。

的想法是使用$.map您阵列转变成包含了自动完成构件可以解析元素的数组。

另请注意，传递给AJAX调用的data参数在用户输入一个词语时最终应该为?query=<term>。

来源

2012-09-11 13:22:46

感谢您的回答。我想我可以编辑返回的JSON到标签和值而不是id和短语。但是，如果我更改返回的JSON，是否在我的示例中使用了正确的源代码，还是必须以某种方式将输入的文本发送到服务。我的意思是该服务接受一个名为“查询”的参数，所以在某种程度上，我想它也需要该参数发送给它。或者我完全离开这里？ –

所以，如果你改变你的web服务返回正确的事情，但采取所谓的'query'的说法，你的代码将类似于上面，除了你刚刚叫'响应（数据）'的'success'处理程序。换句话说，由于您正在更改发生的默认AJAX请求，因此您仍然必须自己做。 –

太好了，当我回到我的开发计算机时，我会尝试一下。并通过写入数据：{query：request.term}，web服务将被调用与正确的输入作为查询参数吧？ –

使用JSON jQuery用户界面自动完成从URL

回答

相关问题