Question

我需要一个列表，当用户在上面的输入中键入字母时，列表会显示以该字母开头的单词。因此，如果用户在输入中键入“a”，则弹出下拉列表并显示来自外部php页面的单词，以“a”开头，可能是“apple”或“artifact”。此外，如果用户键入“ab”，页面应显示以“ab”开头的所有单词。

我知道我必须以某种方式使用Jquery ajax从外部页面获取数据（这只是在一个简单的列表中），并根据用户输入的字母将特定数据插入到另一页面中。我怎么能这样做？

Answer 1

如果您可以控制外部页面，最简单的方法是修改它以返回JSON数据。然后，您可以使用开箱即用的jQuery UI Autocomplete。

http://docs.jquery.com/UI/Autocomplete

当使用String [作为数据源参数]时，Autocomplete插件期望该字符串指向将返回JSON数据的URL资源。它可以位于同一主机上，也可以位于不同的主机上（必须提供JSONP）。请求参数“term”将添加到该URL。数据本身的格式与上述本地数据的格式相同。

如果您无法修改页面，则必须使用第三种类型的jQuery UI Autocomplete，即将回调传递给插件。然后，编写一个回调函数，.get()关闭其他页面的数据并解析它。使用jQuery的DOM遍历方法很容易。

Answer 2

如果这是来自你的ajax调用的回调，它会返回一个单词数组，这样的东西应该可行

function ajaxComplete(listOfWords){
    var ul = $("<ul />");
    for(var i = 0; i < listOfWords.length; i++)
        ul.append("<li>" + listOfWords[i] + "</li>");
    $("#someDiv").html(ul);
}

使用jquery / ajax在外部页面上使用列表填充无序列表？

2 个答案: