Použitie jQuery autocomplete pre vytvorenie zoznamu miest

Funkcia autocomplete už dávno nie je len doménou vyhľadávačov. Jej reálne využitie je aj pri vypĺňaní údajov z určitého zoznamu. Keď túto funkciu spojíme so zoznamom miest, ktorý získame parsovaním dát z geonames.org, získame praktickú pomôcku pri vypĺňaní objednávkových či registračných formulárov.

Na adrese http://www.geonames.org/export/geonames-search.html sa nachádza kompletný popis parametrov pre túto službu. Implementácia pomocou jQuery autocomplete je jednoduchá. Jediným problémom je absencia dokumentácie pre JSON výstup, no na internete je obrovské množstvo tutoriálov a návodov ako pracovať s JSON dátami v tomto plugine. Okrem samotného pluginu budeme samozrejme potrebovať aj jQuery knižnicu. Poslednú verziu stiahneme na adrese http://jquery.com/.

Podla dokumentácie geonames.org pre získanie aktuálneho zoznamu slovenských miest sú pre nás zaujímavé parametre name_startsWith čo je hľadanie podla začiatku reťazca, country, ktorým nastavíme obmedzenie na krajinu, v tomto prípade SK(Slovensko), lang - jazyk taktiež na SK (Slovenčina), featureClass parameter, ktorý určuje typ záznamu, nastavíme na P čo je podla dokumentácie mesto alebo dedina (ak by sme tento parameter nezadali dostali by sme pre jedno mesto viac záznamov, čo nie je želané) a posledný parameter type - v tomto prípade JSON. Nasledujúci riadky kódu demonštrujú implementáciu pomocou jQuery pluginu autocomplete:

$(function(){
    $('form').attr('autocomplete','off');
      
    $("#city").autocomplete('http://ws.geonames.org/search', {
        dataType: "jsonp",
        parse: function(data) {
            return $.map(data.geonames, function(row) {
                return {
                    data: row,
                    value: row.name,
                    result: row.name
                }
            });
        },
        extraParams:{
            q: '',
            type: 'json',
            country: 'SK',
            name_startsWith: function(){
                return $("#city").val();
            },
            featureClass: 'P',
            lang: 'SK'
        },
        formatItem: function(item) {
            return item.name;
        }
    });
});

Ak ste si všimli, dataType nie je JSON ale JSONP. Dôvodom je to, že JSONP umožňuje vykonávať HTTP requesty aj mimo domény. Pre plugin autocomplete je defaultné posielanie dotazov cez parameter q. V mojej implementácii hľadám pomocou parametra name_startsWith, preto parameter q musím nastaviť na prázdny reťazec aby sa podla neho nevyhľadávalo.

Ukážka na http://ivan-sulek.tk/demos/autocomplete/