jQuery UI Autocomplete JSON Issue

Question

I use below code for jQuery UI Autocomplete.

<script>
$(function() {

    $( "#city" ).autocomplete({
        source: function( request, response ) {

        $.post('<?php echo base_url()?>records/get_village_street_town_name', {
           SourceLanguage: 'SourceLanguage',
           inputVal: $( "#city" ).val()
        },

       function (data) { 
            citydata = jQuery.parseJSON( data );

            response( 

            $.each(citydata, function( index, city ) {
                return city.cityname;
            })

        );


       });



        },
        minLength: 2,
    });
});
</script>

Below is the return O/P via the AJAX call.

[{"cityname":"ABCDE"},{"cityname":"ABDCE"},{"cityname":"ABEDC"}]

The problem is city textbox is not filled with citynames from the AJAX ? How can I fix this ?

I referred below two but didn't help.

JQuery UI autocomplete with json and ajax

Using jquery ui autocomplete + ajax json data

there is no need to $.map() also as there is no data manipulation... is data an array of object — Arun P Johny
– Arun P Johny, Commented Nov 4, 2013 at 5:57
@ArunPJohny, excellent point. I never even looked at that function body. :P — Paul Draper
– Paul Draper, Commented Nov 4, 2013 at 6:05

user2489311 · Accepted Answer · 2013-11-04 06:55:12Z

0

Some of your JSON code is invalid and the parser does not identify it as object, in the example you declared [{"cityname":"ABCDE"},{"cityname":"ABDCE"},,{"cityname":"ABEDC"}] which should be [{"cityname":"ABCDE"},{"cityname":"ABDCE"},{"cityname":"ABEDC"}].

answered Nov 4, 2013 at 6:55

user2489311

Sign up to request clarification or add additional context in comments.

Comments

Techie · Accepted Answer · 2013-11-04 07:46:41Z

0

Working code would be

<script>
$(function() {

    $( "#city" ).autocomplete({
        source: function( request, response ) {

        $.post('<?php echo base_url()?>records/get_village_street_town_name', {
           SourceLanguage: 'SourceLanguage',
           inputVal: $( "#city" ).val()
        },

       function (data) { 
            citydata = jQuery.parseJSON( data );

            response( 

            $.map( citydata, function( item ) {
                return item.cityname;
            })

        );
       });

        },
        minLength: 2,
    });
});
</script>

answered Nov 4, 2013 at 7:46

Techie

45.2k45 gold badges164 silver badges248 bronze badges

Collectives™ on Stack Overflow

jQuery UI Autocomplete JSON Issue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related