使用 JQuery UI 自动完成，以 Dbpedia 作为源

Question

我想使用 dbpedia 搜索结果作为源来自动完成 "SameAs" 输入。我完成了下一个 JS 代码。但我没有得到任何结果。

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

对于术语 'berlin'，dbpedia 将 return 这样的结果：

<?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 &quot;death strip&quot;) that contained anti-vehicle trenches, &quot;fakir beds&quot; 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>

我认为问题在于自动完成无法识别 jQuery xml 结果。 xml 结果我需要的主要项目是标签和 URI。

Answer 1

根据此处找到的详细信息：https://github.com/dbpedia/lookup 我建议使用以下代码：

$(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);
    }
  });
});

根据文档，您使用的 URL 不正确。应该是：http://lookup.dbpedia.org/api/search/PrefixSearch。它还提到：

By default all data is returned as XML, the service also retuns JSON to any request including the Accept: application/json header.

因此我在 AJAX 参数中添加了 headers 选项。

进一步的测试表明，一个对象是 returned with results 作为一个元素。你会想要 return data.results 到 response().

使用 JQuery UI 自动完成，以 Dbpedia 作为源

using JQuery UI autocomplete with Dbpedia as source

jquery-ui

jquery-ui-autocomplete

dbpedia