Parse JSON with jquery and add it to the textbox autocomplete list

Question

I am trying to build an autocomplete textbox. My script is as below in Razor View page:

@model AutoComplete.Models.Country
@{
    ViewBag.Title = "Index";
}
@Scripts.Render("~/bundles/jquery")

<h2>Index</h2>
@Html.TextBoxFor(m => m.CountryName, new { Class = "field" })
<div class="keys"></div>

<script>
    $(function () {
        $('.field').keyup(function () {
            $.ajax({
                url: "./js/" + $('.field').val(),
                success: function (result) {
                }
            });
        });

    });
</script>

My controller method is:

public ActionResult SearchByKey(string keyword)
        {
            CountryContext db = new CountryContext();
            var result= db.Countries.Where(x => x.CountryName.Contains(keyword));
            return Json(result , JsonRequestBehavior.AllowGet);

        }

My controller returns Json data as below:

[{"CountryId":"1","CountryName":"India"},
 {"CountryId":"2","CountryName":"Indonesia"}
]

I want to 1]parse this data and 2] append it to the textbox in the above view page. How can I do this?

You can cover the parsing aspect by adding dataType: "json" to your $.ajax() parameters. That tells the function to expect a JSON formatted response. — diggersworld
– diggersworld, Commented Jan 27, 2013 at 11:44
@Alexander When I alert result , it says [object Object], [object Object] — Bhushan Firake
– Bhushan Firake, Commented Jan 27, 2013 at 11:55

thaJeztah · Accepted Answer · 2013-01-27 12:17:28Z

1

Probably a simpler solution:

$(function () {
    $('.field').keyup(function () {
        $.getJson("./js/" + $('.field').val(), function (result) {
            // result should contain the parsed JSON
        });
    });

});

Examples can be found here: http://api.jquery.com/jQuery.getJSON/

NOTE: The second selector for '.field' should probably be replaced with $(this), .val() will be retrieved for every tag with a 'field' class

Or even something like:

    $.on('keyup', '.field', function () {
        $.getJson("./js/" + $(this).val(), function (result) {
            // result should contain the parsed JSON
        });
    });

Haven't tested the code though, just out of my head :)

edited Jan 27, 2013 at 12:17

answered Jan 27, 2013 at 12:07

thaJeztah

29.3k9 gold badges77 silver badges92 bronze badges

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

1 Comment

thaJeztah Over a year ago

I wanted to illustrate usage of .getJson as alternative to .ajax, in order to don't have to specify content-types etc. Furthermore, the answer by Simon below doesn't really make sense; the data should not need to be parsed (parseJSON) for each element in the array

adeneo · Accepted Answer · 2013-01-27 12:16:20Z

0

Parse the returned string to make it an object, then somehow iterate over the object and insert the values where you'd like to have them inserted :

$(function() {
    $('.field').on('keyup', function() {
        $.ajax({
            url: "./js/" + this.value
        }).done(function(data) {
            var json = $.parseJSON(data);
            $.each(json, function(key, value) {
                 $(element).append(value);
            });
        });
    });
});

answered Jan 27, 2013 at 12:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

11 Comments

Bhushan Firake Over a year ago

It shows an error in firebug TypeError: object is null [Break On This Error] length = object.length,

adeneo Over a year ago

It sounds like you are not returning proper formatted JSON from the serverside.

thaJeztah Over a year ago

@adeneo $(element).append(value) should probably be $(element).append(value.CountryName); or something alike?

thaJeztah Over a year ago

@BhushanFirake if you put console.log(data); inside the 'done' callback, does it output a JSON array/object or a string?

adeneo Over a year ago

@thaJeztah - You're probably right, but it was meant more as a guide on how to iterate and insert values, as I'm not sure the OP really knows what is returned here.

|

Collectives™ on Stack Overflow

Parse JSON with jquery and add it to the textbox autocomplete list

2 Answers 2

1 Comment

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related