使用Ajax请求作为源数据的Jquery自动完成搜索 [英] Jquery Autocomplete Search with Ajax Request as sourcedata

问题描述

我想做什么:

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

I want to do a input text field with a jquery autocomplete function which gets the source data from a cross-domain curl request. The result should be exactly like this example (CSS not important here): http://abload.de/img/jquerydblf5.png (So I actually want to show additional infos which I get from the curl Request). The URL to get the source data is http://www.futhead.com/15/players/search/quick/?term= and in the end I add those letters which are currently typed in at my input field (for example "Ronaldo").

此刻，我仅尝试执行searchrequest，而没有在下拉菜单中显示所有信息，如上面的屏幕所示.我只想查看curl请求实际上返回了哪些球员名称.稍后，我将尝试为下拉菜单添加更多信息.也许你们也可以帮助我(我认为它称为自定义renderItem?).

At the moment I only tried to perform the searchrequest without showing all infosin the dropdown as shown in the screen above. I only want to see which playernames I actually got back by the curl request. Later I will try to add more information for the dropdown. Maybe you guys can help me as well with this as well (I think its called custom 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测试):

My playerscraper.php is performing the curl request and actually returns a array (tested with 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请求中获得正确的结果，并从输入字段中获得搜索条件.当我在输入字段中键入内容时，什么也没发生(定义源的函数被调用-已通过警报测试).

I have no idea how to do the source part for the autocomplete function this way, that I get the right results from the ajax request with my searchterm from the input field. When I type in something in the input field, nothing happens (the function which defines the source is getting called - tested with an alert).

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

<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>

推荐答案

JSON的格式与自动填充小部件期望的格式不兼容.这是$.map起作用的地方.您可以使用此功能将JSON转换为所需的格式.首先返回这样的{label: "display name", value: "some id"}对:

The JSON is in a format which is incompatible with what autocomplete widget expects. This is where the $.map comes into play. You use this function to convert the JSON to desired format. Begin by returning a {label: "display name", value: "some id"} pairs like this:

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

注意:

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

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

1. 对于这样的data参数，您应该使用request.term而不是输入元素值:

1. You should use request.term instead of input element value for the data parameter like this:

data: { term: request.term }

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

1. You should set higher delay and minLength values to reduce number of JSON requests:

delay: 500,
minLength: 3,

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

1. There are some undefined variables in your PHP script. Fix. Make sure that you echo the JSON instead of returning it. The remote server sends JSON so there is no need to json encode it again.

$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错误和警告.

这篇关于使用Ajax请求作为源数据的Jquery自动完成搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！