使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

Question

我想做的事：

我想做一个带有 jquery 自动完成功能的输入文本字段，该功能从跨域 curl 请求中获取源数据。结果应该和这个例子完全一样（CSS在这里不重要）：http://abload.de/img/jquerydblf5.png（所以我实际上想显示从 curl 请求中获得的其他信息）。获取源数据的 URL 是 http://www.futhead.com/15/players/search/quick/?term=，最后我添加了当前在我的输入字段中输入的那些字母（例如“罗纳尔多”）。

目前我只尝试执行搜索请求，而没有在下拉列表中显示所有信息，如上面的屏幕所示。我只想查看我通过 curl 请求实际返回了哪些玩家姓名。稍后我将尝试为下拉列表添加更多信息。也许你们也可以帮助我解决这个问题（我认为它称为自定义 renderItem ？？）。

这是我尝试过的：

<script>
 $( "#tags" ).autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'GET',
            url: 'playerscraper.php',
            dataType: "json",
            data: function () { 
                return $("#results").val() 
            },
            success: function (data) {
                // I have no idea what this response and map is good for
                response($.map(data, function (item) {
                    return {
                        label: item.label,
                        id: item.value,
                    };
                }));
            },
        });
    }
});
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

我的 playercraper.php 正在执行 curl 请求，实际上返回了一个数组（用 echo 测试）：

$term = $_GET['term'];
$curlRequest = new CurlRequest(); 
$result = $curlRequest->get('http://www.futhead.com/15/players/search/quick/?term=' . $searchterm);
$players = array();

return json_encode($result);

我的问题：

我不知道如何以这种方式为自动完成功能执行源代码部分，因为我从输入字段中的搜索项从 ajax 请求中获得正确的结果。当我在输入字段中输入内容时，什么也没有发生（定义源的函数被调用 - 使用警报进行测试）。

首先尝试在您的帮助下解决问题（当前代码）：

<script>
 $( "#tags" ).autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'GET',
            url: 'playerscraper.php',
            dataType: "json",
            data: function () {
                term: request.term
            },
            success: function (data) {
                // I have no idea what this response and map is good for
                response($.map(data, function(item) {
                    return {
                        label: item.full_name,
                        value: item.player_id
                    };
                }));
            },
        });
    },
    minLength: 3,
    delay: 500
});
</script>

Answer 1

JSON 的格式与自动完成小部件所期望的不兼容。这就是$.map 发挥作用的地方。您可以使用此函数将 JSON 转换为所需的格式。首先返回一个 {label: "display name", value: "some id"} 对，如下所示：

response($.map(data, function(item) {
    return {
        label: item.full_name,
        value: item.player_id
    };
}));

注意事项：

1. 您应该使用 JSON 发送内容类型标头：

header("Content-Type: application/json");
echo $result;

1. 您应该使用request.term 而不是data 参数的输入元素值，如下所示：

data: { term: request.term }

1. 您应该设置更高的 delay 和 minLength 值以减少 JSON 请求的数量：

delay: 500,
minLength: 3,

4. 您的 PHP 脚本中有一些未定义的变量。使固定。确保您 echo JSON 而不是 returning 它。远程服务器发送 JSON，因此无需再次对其进行 json 编码。

$term = $_GET['term'];
$result = file_get_contents('http://www.futhead.com/15/players/search/quick/?term=' . $term);
header("Content-Type: application/json");
echo $result;

5. 始终通过直接在浏览器中打开来检查您的 PHP 脚本是否存在问题。始终查看浏览器 JavaScript 控制台以查找 JavaScript 错误和警告。

Answer 2

在 jQuery 代码中几乎没有什么问题

1. 您在服务器端代码中使用了$_GET['term']，但未在ajax 请求查询字符串中传递term 需要修复为

   数据：{term：request.term}

2. 代码中的额外 comman(,)，它会在 IE 浏览器中产生问题

   response($.map(data, function (item) { 返回 { 标签：item.label， id：item.value }; }));