I want to autocomplete the "SameAs" input using dbpedia search results as source. I finished up with the next JS code. but I don't get any results.
<script>
$(document).ready(function () {
$("#SameAs").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://lookup.dbpedia.org/api/search.asmx/PrefixSearch?QueryClass=place&MaxHits=20",
/*dataType: "json",
accepts: 'application/json',*/
data: {
QueryString: request.term
},
success: function (data) {
response(data);
}
});
},
minLength: 1,
select: function (event, ui) {
$("#SameAs").text(ui.item.Label);
}
});
});
</script>
for the term 'berlin', the dbpedia will return such result:
<?xml version="1.0" encoding="utf-8"?>
<ArrayOfResult
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://lookup.dbpedia.org/">
<Result>
<Label>Berlin</Label>
<URI>http://dbpedia.org/resource/Berlin</URI>
<Description>
Berlin is the capital city of Germany and one of the 16 states of Germany. With a population of 3.5 million people, Berlin is Germany's largest city and is the second most populous city proper and the eighth most populous urban area in the European Union. Located in northeastern Germany, it is the center of the Berlin-Brandenburg Metropolitan Region, which has 5.9 million residents from over 190 nations. Located in the European Plains, Berlin is influenced by a temperate seasonal climate.
</Description>
<Classes>
<Class>
<Label>settlement</Label>
<URI>http://dbpedia.org/ontology/Settlement</URI>
</Class>
<Class>
<Label>place</Label>
<URI>http://dbpedia.org/ontology/Place</URI>
</Class>
<Class>
<Label>populated place</Label>
<URI>http://dbpedia.org/ontology/PopulatedPlace</URI>
</Class>
<Class>
<Label>city</Label>
<URI>http://schema.org/City</URI>
</Class>
<Class>
<Label>owl#Thing</Label>
<URI>http://www.w3.org/2002/07/owl#Thing</URI>
</Class>
<Class>
<Label>place</Label>
<URI>http://schema.org/Place</URI>
</Class>
<Class>
<Label>city</Label>
<URI>http://dbpedia.org/ontology/City</URI>
</Class>
</Classes>
<Categories>
<Category>
<Label>Populated places established in the 13th century</Label>
<URI>http://dbpedia.org/resource/Category:Populated_places_established_in_the_13th_century</URI>
</Category>
<Category>
<Label>European Capitals of Culture</Label>
<URI>http://dbpedia.org/resource/Category:European_Capitals_of_Culture</URI>
</Category>
<Category>
<Label>States of Germany</Label>
<URI>http://dbpedia.org/resource/Category:States_of_Germany</URI>
</Category>
<Category>
<Label>City-states</Label>
<URI>http://dbpedia.org/resource/Category:City-states</URI>
</Category>
<Category>
<Label>Host cities of the Summer Olympic Games</Label>
<URI>http://dbpedia.org/resource/Category:Host_cities_of_the_Summer_Olympic_Games</URI>
</Category>
<Category>
<Label>Members of the Hanseatic League</Label>
<URI>http://dbpedia.org/resource/Category:Members_of_the_Hanseatic_League</URI>
</Category>
<Category>
<Label>Capitals in Europe</Label>
<URI>http://dbpedia.org/resource/Category:Capitals_in_Europe</URI>
</Category>
<Category>
<Label>States and territories established in 1237</Label>
<URI>http://dbpedia.org/resource/Category:States_and_territories_established_in_1237</URI>
</Category>
<Category>
<Label>Berlin</Label>
<URI>http://dbpedia.org/resource/Category:Berlin</URI>
</Category>
<Category>
<Label>German state capitals</Label>
<URI>http://dbpedia.org/resource/Category:German_state_capitals</URI>
</Category>
</Categories>
<Templates></Templates>
<Redirects></Redirects>
<Refcount>18984</Refcount>
</Result>
<Result>
<Label>Berlin Wall</Label>
<URI>http://dbpedia.org/resource/Berlin_Wall</URI>
<Description>
The Berlin Wall was a barrier constructed by the German Democratic Republic starting on 13 August 1961, that completely cut off West Berlin from surrounding East Germany and from East Berlin. The barrier included guard towers placed along large concrete walls, which circumscribed a wide area (later known as the "death strip") that contained anti-vehicle trenches, "fakir beds" and other defenses.
</Description>
<Classes>
<Class>
<Label>architectural structure</Label>
<URI>http://dbpedia.org/ontology/ArchitecturalStructure</URI>
</Class>
<Class>
<Label>place</Label>
<URI>http://dbpedia.org/ontology/Place</URI>
</Class>
<Class>
<Label>building</Label>
<URI>http://dbpedia.org/ontology/Building</URI>
</Class>
<Class>
<Label>owl#Thing</Label>
<URI>http://www.w3.org/2002/07/owl#Thing</URI>
</Class>
<Class>
<Label>place</Label>
<URI>http://schema.org/Place</URI>
</Class>
</Classes>
<Categories>
<Category>
<Label>Former buildings and structures of Germany</Label>
<URI>http://dbpedia.org/resource/Category:Former_buildings_and_structures_of_Germany</URI>
</Category>
<Category>
<Label>Allied occupation of Germany</Label>
<URI>http://dbpedia.org/resource/Category:Allied_occupation_of_Germany</URI>
</Category>
<Category>
<Label>20th century in Germany</Label>
<URI>http://dbpedia.org/resource/Category:20th_century_in_Germany</URI>
</Category>
<Category>
<Label>Revolution landmarks</Label>
<URI>http://dbpedia.org/resource/Category:Revolution_landmarks</URI>
</Category>
<Category>
<Label>History of East Germany</Label>
<URI>http://dbpedia.org/resource/Category:History_of_East_Germany</URI>
</Category>
<Category>
<Label>Inner German border</Label>
<URI>http://dbpedia.org/resource/Category:Inner_German_border</URI>
</Category>
<Category>
<Label>Walls</Label>
<URI>http://dbpedia.org/resource/Category:Walls</URI>
</Category>
<Category>
<Label>Eastern Bloc</Label>
<URI>http://dbpedia.org/resource/Category:Eastern_Bloc</URI>
</Category>
<Category>
<Label>Anti-communism</Label>
<URI>http://dbpedia.org/resource/Category:Anti-communism</URI>
</Category>
<Category>
<Label>1961 in politics</Label>
<URI>http://dbpedia.org/resource/Category:1961_in_politics</URI>
</Category>
<Category>
<Label>1989 disestablishments</Label>
<URI>http://dbpedia.org/resource/Category:1989_disestablishments</URI>
</Category>
<Category>
<Label>1961 in military history</Label>
<URI>http://dbpedia.org/resource/Category:1961_in_military_history</URI>
</Category>
<Category>
<Label>1961 establishments</Label>
<URI>http://dbpedia.org/resource/Category:1961_establishments</URI>
</Category>
<Category>
<Label>Buildings and structures completed in 1961</Label>
<URI>http://dbpedia.org/resource/Category:Buildings_and_structures_completed_in_1961</URI>
</Category>
<Category>
<Label>Separation barriers</Label>
<URI>http://dbpedia.org/resource/Category:Separation_barriers</URI>
</Category>
<Category>
<Label>Destroyed landmarks</Label>
<URI>http://dbpedia.org/resource/Category:Destroyed_landmarks</URI>
</Category>
<Category>
<Label>Berlin Wall</Label>
<URI>http://dbpedia.org/resource/Category:Berlin_Wall</URI>
</Category>
<Category>
<Label>History of Berlin</Label>
<URI>http://dbpedia.org/resource/Category:History_of_Berlin</URI>
</Category>
</Categories>
<Templates></Templates>
<Redirects></Redirects>
<Refcount>1406</Refcount>
</Result>
I think the problem is that autocomplete don't recognize the jQuery xml results. the main items I need of the xml result are the Label and the URI.
Based on the details found here: https://github.com/dbpedia/lookup I would advise the following code:
$(function() {
$("#SameAs").autocomplete({
source: function(request, response) {
console.log("Making request of dbpedia:" + request.term);
$.ajax({
url: "http://lookup.dbpedia.org/api/search/PrefixSearch",
dataType: "json",
data: {
QueryClass: "place",
MaxHits: 20,
QueryString: request.term
},
headers: {
Accept: "application/json"
},
method: "get",
success: function(data) {
console.log("Successful", data);
response(data.results);
}
});
},
minLength: 1,
select: function(event, ui) {
$("#SameAs").text(ui.item.Label);
}
});
});
Based on the docs, the URL you are using is not correct. It should be: http://lookup.dbpedia.org/api/search/PrefixSearch. It also mentions:
By default all data is returned as XML, the service also retuns JSON to any request including the
Accept: application/jsonheader.
Hence I have added the headers option in the AJAX parameters.
Further testing shows that an object is returned with results as an element. You will want to return data.results to response().