jQuery UI Autocomplete not showing AJAX results
Question
I'm trying to build an autocomplete form which will load JSON from an external database (which returns JSON) on user input. My code seems to work properly as it will log an array containing multiple JSON objects. However, jQuery UI does not show the results on the page itself.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="ui-widget">
<input type="text" id="tags" />
</div>
<script src="assets/js/script.js"></script>
</body>
</html>
JS
$(document).ready(function(){
function createUrl(input){
var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
return url;
}
function getSource(input){
var input = input.term;
var url = createUrl(input);
$.getJSON(url, function(data){
var items = [];
$.each( data, function(key, val){
items.push(val);
});
console.log(items); // Shows correct results
return items;
});
}
$("#tags").autocomplete({
minLength: 2,
source: getSource
});
});
What can be the problem? Thanks in regards.
3 answers
solution1
2 ACCPTED 2015-11-24 19:11:30
try:
$("#tags").autocomplete({
minLength: 2,
source: function( request, response ) {
$.getJSON("http://forums.zybez.net/runescape-2007-prices/api/"+request.term, function(data){
var items = [];
$.each( data, function(key, val){
items.push(val);
});
console.log(items); // Shows correct results
response(items);
});
}
});
solution2
0 2015-11-24 19:34:42
Thanks to Madalin's answer and OA's comment I found the solution:
function createUrl(input){
var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
return url;
}
$("#tags").autocomplete({
minLength: 2,
source: function( request, response ) {
var term = this.term;
var url = createUrl(term);
$.getJSON(url, function(data){
var items = [];
$.each( data, function(key, val){
items.push(val);
});
response(items);
});
}
});
solution3
0 2017-11-11 00:22:53
When you set the source of autocomplete like this:
$("#btnArtist").autocomplete({ source: "/Ajax/Home/AutoCompleteData" });
You can see the returned JSON data from the server in the Console, but it won't show the results.
Changing URL to Ajax object fixed my problem. Here is the working code:
$("#btnArtist").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Ajax/Home/AutoCompleteData",
data: {
term: request.term
}
}).done(function (data) {
response(data);
});
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.