jquery autocomplete how to set up?

Question

JavaScript

I'm trying to set up jQuery Autocomplete, I wrote this code:

$("#name_input").autocomplete({
        source: 'Home/MessageHandler',
        minLength: 1,
        select: function (event, ui) {
            log("Selected: " + ui.item.value);
        }
    });
});

And here is such a controller (I use ASP .Net Core):

public JsonResult MessageHandler()
{
    string result = "[{label:'string1',value:'string2'},{label:'string3',value:'string4'}]";

    return Json(result);
}

If you contact the server directly: localhost:3140/Home/MessageHandler then everything is OK, I get the string: [{label:'string1',value:'string2'},{label:'string3',value:'string4'}]

But if you enter a request in the input to which the autocomplit event is connected, autocomplete does not appear, and the loading icon appears in the input line, which no longer disappears from there (see screenshot 3) I am attaching
screenshots of the response from the server:

Headers:

Response from the server:

Input field with an icon which does not disappear:


Tell me what is my problem?

Answer 1

The problem was that the controller did not give the correct json, rewrote it like this:

public IActionResult MessageHandler()
{
           var result = new[] { @"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
                                "Clojure", "COBOL", "ColdFusion", "Erlang","Fortran", "Groovy","Haskell",
                                "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python","Ruby", "Scala", "Scheme" };
            return Json(result);
}

And everything was ok. Now the response from the server looks like this:
If someone tells you where the dog rummaged, they will be grateful.