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

肯特

我想做的事:

我想用一个jQuery自动完成功能来做一个输入文本字段,它从跨域curl请求中获取源数据。结果应该完全类似于此示例(此处的CSS不重要):http : //abload.de/img/jquerydblf5.png(因此,我实际上想显示从curl请求中获得的其他信息)。获取源数据的URL是http://www.futhead.com/15/players/search/quick/?term=,最后添加我在输入字段中当前键入的那些字母(例如“ Ronaldo”)。

目前,我只尝试执行searchrequest,而没有在下拉菜单中显示所有信息,如上面的屏幕所示。我只想查看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>

我的playerscraper.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请求中获得正确的结果,并在输入字段中输入searchterm。当我在输入字段中键入内容时,什么也没发生(定义源的函数被调用-经过警报测试)。

首先尝试在您的帮助下解决问题(当前代码):

<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>
萨尔曼A

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. 您应该设置更高的delayminLength值以减少JSON请求的数量:
delay: 500,
minLength: 3,
  1. 您的PHP脚本中有一些未定义的变量。使固定。确保您echo使用JSON而不是使用return它。远程服务器发送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;
  1. 始终通过直接在浏览器中打开来检查PHP脚本是否存在问题。始终查看浏览器JavaScript控制台以查找JavaScript错误和警告。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章