How to create custom datalist from XML file using jquery

Question

<mjesta>
<mjesto>Zagreb</mjesto>
<mjesto>Split</mjesto>
<mjesto>Ploce</mjesto>
<mjesto>Pula</mjesto>
<mjesto>Pazin</mjesto>
<mjesto>Daruvar</mjesto>
<mjesto>Bjelovar</mjesto>
<mjesto>Slunj</mjesto>
<mjesto>Osijek</mjesto>
<mjesto>Virovitica</mjesto>
</mjesta>

XML file i'm reading

$(document).ready(function() {
    $(function() {

        $.ajax({
            url: "location of xml...",
            type: "GET",
            dataType: "xml",
            success: function(gradovi) {

                $(gradovi).find("mjesta").each(function() {
                    $(this).find("mjesto").each(function() {
                        $red = "<option value=" + $(this) + ">"; 
                        $("#mjesta").append($red);
                    });
                });

            }
        });
    });
});

Jquery code

<input list="mjesta" name="mjesta">
                    <datalist id="mjesta">                      
                    </datalist>

HTML where i'm inserting the data

How do I read this xml file and insert data into my datalist? I have no experience with xml so I dont know how to get the word that is inside <mjesto>WORD</mjesto>

I'm pretty sure the problem is here:

 $red = "<option value=" + $(this) + ">";

Devima · Accepted Answer · 2014-06-09 16:09:18Z

if your xml file is and his name is test.xml and this file is in the same folder of the next html page

<?xml version="1.0" encoding="utf-8"?>
<mjesta>
<mjesto>Zagreb</mjesto>
<mjesto>Split</mjesto>
<mjesto>Ploce</mjesto>
<mjesto>Pula</mjesto>
<mjesto>Pazin</mjesto>
<mjesto>Daruvar</mjesto>
<mjesto>Bjelovar</mjesto>
<mjesto>Slunj</mjesto>
<mjesto>Osijek</mjesto>
<mjesto>Virovitica</mjesto>
</mjesta>

for populate the datalist tag your html page will be

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) {
                var xmlDocument = $.parseXML(xml)
                var $xml = $(xmlDocument);
                $(xml).find('mjesto').each(function(){
                    var $mjesto = $(this).text();
                    $('<option>'+$mjesto+'</option>').appendTo('#mjesta')
                })  
             }
        });

   });
</script>
</head>
<body>
<input  type="text" name="mjesta" list="mjesta">
<datalist id="mjesta"></datalist>  
</body>
</html>

You could obtain the same result using $get jquery in this care the script in the html page will be. Again the xml file and the html page must be in the same folder on in the same level

<script type="text/javascript">
$(document).ready(function(){
       $.get('test.xml', function(xml){
            $(xml).find('mjesto').each(function(){
                var $mjesto = $(this).text();
                $('<option>'+$mjesto+'</option>').appendTo('#mjesta')
            });
        });     
   });
</script>

Welcome to this community even if you don't have a reputation needed to vote up or down remember that you can still flag in green this reply if you're satisfied with the answer. In this way we both earn points. Thanks.

Collectives™ on Stack Overflow

How to create custom datalist from XML file using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related