JQuery автоматически завершается из XML - PullRequest
Новая
       11

JQuery автоматически завершается из XML

1 голос
/ 13 июня 2011

Я играю с автозаполнением jquery ui. И есть вопрос о том, как запросить данные XML. У меня есть XML-файл со списком местоположений, похожий на: 

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

И мой JQuery: 

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

                }
            });
        }
    });
});

У меня проблемы с тем, что я хочу указать переменную, которая будет искать только name_en, когда я установил ее в EN, а в других случаях искать только name_fr, когда она установлена ​​в FR. Я не хочу, чтобы результаты name_fr возвращались, когда я установил язык на EN. Заранее спасибо.

1 Ответ

3 голосов
/ 13 июня 2011

Сначала я выложу код:

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

                }
            });
        }
    });
});

А вот решение, которое я протестировал JSFiddle

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

Это немного грязно,но вы можете сделать это лучше, если хотите.Я расскажу вам, как это работает:

Сначала вы получаете список узлов «geoname», я думаю, не только один: 

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

Вы получаете значения name_en и name_fr, и выустановите 'value' в пустую строку ('value' будет текстом автозаполнения jQuery).

В автозаполнении jQuery вы можете установить функцию для источника, который имеет объект 'req', иобратный вызов «добавить».

Объект 'req' содержит свойство 'term', которое является фактическим вводом текстового поля.Обратный вызов 'add' добавляет список (массив) соответствующих элементов.

Таким образом, вы инициализируете массив 'source': 

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

, затем вы перебираете массив 'data'и, основываясь на текущем 'lang', установите свойство 'value' с фактическим 'name_en' или 'name_fr'.

После этого вы можете проверить на object.value, если оно совпадаеттребования: 

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

, если так, то вставьте массив 'source'.

и ... add (source);'возвращает' фактический список.

Обратите внимание, что функция источника объекта автозаполнения будет вызываться каждый раз, когда происходит новый поиск автозаполнения, поэтому вы каждый раз возвращаете нужную коллекцию элементов.

OfКонечно, вы можете сделать более сложное и оптимизированное решение, если оно соответствует вашим требованиям.

ура, negra

...