Question

我完全不熟悉javaScript和所有这些东西。我需要实现自动完成，所以我从简单的例子开始。代码如下：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script type="text/javascript">
    $(function() {
        $( "#tags" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                  url: "http://myUrl.com/suggest.json?term=harry",
                  success: function( data ) {
                    response( data.suggestions );
                  }
                });
              },
        });
      });
      </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>
</body>
</html>

这是我从脚本中提到的url获得的json：

{
    "term" : "harry",
    "count" : 4,
    "suggestions" : 
    [
        "harry potter",
        "harry l.",
        "harry a.",
        "harry leon"
    ]
}

似乎没问题，但我没有获得自动填充选项。可能是什么问题？

Answer 1

您的代码运行正常。我看到的一个问题是},应为}，因为},在IE中不起作用

<强> jsFiddle

Answer 2

我找到了问题来源。他们很少，所以也许其他人会感兴趣。

第一个问题是跨域调用限制。要允许跨域调用，必须在返回的json上实现回调函数。

其次，在我将它作为独立的html工作后，它在整个项目中都不起作用。问题是.menu函数覆盖了我的一个* .jsp文件。从谷歌搜索它我找到解决方案（不是我猜的最好，但仍然有效）重命名jquery.js文件中的.menu函数。经过这些操作，一切正常。

使用jquery和JSON自动完成

2 个答案: