JQuery auto complète de XML

Question

Je joue avec jquery ui autocomplete. Et avez une question sur la façon d'interroger les données XML. J'ai un fichier XML avec une liste d'emplacements, semblable à:

<geoname> 
    <name_en>The Tower of London</name_en> 
    <name_fr>Example text</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 

Et mon jQuery est:

jQuery(document).ready(function() { 
    lang = 'en';   
    $.ajax({ 
     url: "places.xml", 
     dataType: "xml", 
     success: function(xmlResponse) { 
      var data = $("countryCode", xmlResponse).map(function() { 
       return { 
        value: $("name", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 

      $("#results").autocomplete({ 
       source: data, 
       minLength: 0, 
       select: function(event, ui) { 
         $('#foo').html(''); 
         $('#foo').html(ui.item.code).slideDown(); 

       } 
      }); 
     } 
    }); 
}); 

Ce que je vais avoir des problèmes avec est que je veux spécifier une variable qui dit Ne recherchez que name_fr lorsque je l'ai défini sur EN, et dans les autres cas, recherchez uniquement name_fr lorsqu'il est défini sur FR. Je ne veux pas que les résultats de name_fr reviennent lorsque j'ai défini la langue sur EN. Merci d'avance.

Answer 1

D'abord, je vais poster le code:

HTML

<select id="lang"> 
    <option value="en">EN</option> 
    <option value="fr">FR</option> 
</select> 
<input type="text" id="results" /> 
<span id="foo" /> 

XML

<list> 
<geoname> 
    <name_en>The Tower of London</name_en> 
    <name_fr>Example text</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 
<geoname> 
    <name_en>En name</name_en> 
    <name_fr>Fr name</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB2</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 
</list> 

JS

jQuery(document).ready(function() {  
    var lang = "en"; 
    $("#lang").bind("change", function() { 
     lang = this.value; 
    }); 
    $.ajax({ 
     url: "/echo/xml/", 
     dataType: "xml", 
     success: function(xmlResponse) { 
      var data = $("geoname", xmlResponse).map(function() { 
       return { 
        value: "", 
        name_en: $("name_en", this).text(), 
        name_fr: $("name_fr", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 
      $("#results").autocomplete({ 
       source: function(req, add) { 
       var source = []; 
       for (var i = 0; i < data.length; i++) 
       {    
        if (lang == "en") 
        { 
        data[i].value = data[i].name_en; 
        } 
        else if (lang == "fr") 
        { 
         data[i].value = data[i].name_fr; 
        } 
       if (data[i].value.substr(0, req.term.length).toLowerCase() == req.term.toLowerCase()) 
       { 
        source.push(data[i]); 
       } 
       } 
       add(source); 
       }, 
       minLength: 0, 
       select: function(event, ui) { 
         $('#foo').html(''); 
         $('#foo').html(ui.item.code).slideDown(); 

       } 
      }); 
     } 
    }); 
}); 

Et voici une solution jsFiddle Je l'ai testé

http://jsfiddle.net/pinusnegra/KFHnd/

Il est un peu désordonné, mais vous pouvez faire mieux si vous voulez. Je vous le dis comment cela fonctionne:

D'abord, vous recevez une liste de nœuds « de toponyme » Je pense, non seulement un:

var data = $("geoname", xmlResponse).map(function() { 
       return { 
        value: "", 
        name_en: $("name_en", this).text(), 
        name_fr: $("name_fr", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 

Vous obtenez la valeur NAME_EN et name_fr, et que vous définissez la « valeur 'à une chaîne vide (la' valeur 'sera le texte de saisie semi-automatique jQuery).

En jQuery autocomplete, vous pouvez définir une fonction sur la source, qui a un objet 'req' et un rappel 'add'. L'objet 'req' contient une propriété 'term', qui est l'entrée réelle de la zone de texte. Le rappel 'add' ajoute une liste (un tableau) des éléments correspondants.

Vous initialiser un tableau « source »:

source: function(req, add) { 
       var source = []; 

vous itérer sur le tableau « données », et en fonction du courant « lang », la configuration de la « valeur » propriété avec la réelle « NAME_EN 'ou' name_fr '.

Après cela, vous pouvez tester sur le « object.value », si elle est correspond aux exigences:

if (data[i].value.substr(0, req.term.length).toLowerCase() == req.term.toLowerCase()) 
       { 
        source.push(data[i]); 
       } 

le cas échéant, puis poussez dans le tableau « source ».

et ... ajouter (source); 'renvoie' la liste actuelle.

Notez que la fonction de source de l'objet autocomplete sera appelé à chaque fois quand une nouvelle recherche de saisie semi-automatique se produit, de sorte que vous retournez la collection d'objets à chaque fois à droite.

Bien sûr, vous pouvez faire une solution plus sophistiquée et optimisée si celui-ci répond à vos besoins.

acclamations, negra