Reputation: 18552
What I want to do:
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").
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 ??).
This is what I've tried:
<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>
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);
My problem:
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).
First try to fix the problem with your help (current Code):
<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>
Upvotes: 2
Views: 4442
Reputation: 272426
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
};
}));
Notes:
header("Content-Type: application/json"); echo $result;
request.term
instead of input element value for the data
parameter like this:data: { term: request.term }
delay
and minLength
values to reduce number of JSON requests:delay: 500, minLength: 3,
echo
the JSON instead of return
ing 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;
Upvotes: 2
Reputation: 12127
Few things are looking wrong in in jQuery code
You have used $_GET['term']
in server side code but not passed term
in ajax request query string
Need to fix as
data: {term: request.term}
extra comman(,
) in code, it will create issue in IE browsers
response($.map(data, function (item) { return { label: item.label, id: item.value }; }));
Upvotes: 0