Question

How can I use this json data as data source of jquery autocomplete?

[{"uid":"123","UserName":"xxx"},{"uid":"124","UserName":"yyy"}]


<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.ui.core.js" type="text/javascript"></script>
<script src="jquery.ui.position.js" type="text/javascript"></script>
<script src="jquery.ui.widget.js" type="text/javascript"></script>
<script src="jquery.ui.autocomplete.js" type="text/javascript"></script>

<input name="Txt1" type="text" id="Txt1">

<script language="javascript" type="text/javascript">
$("#Txt1").autocomplete(
{
  source:[{"uid":"123","UserName":"xxx"},{"uid":"124","UserName":"yyy"}]
}
)
</script>

Answer 1

I have found the best practice with custom returned values is to create a parse function. This allows you to do what you want with your returned JSON. In this sample code, I do not address the ajax call, but I can add that as well if you need. jQuery UI Autocomplete looks for a label and a value entity. You can put either of those in as you see fit, or even do some custom stuff if needed.

var myStuff = [{
    "uid": "123",
    "UserName": "xxx"},
{
    "uid": "124",
    "UserName": "yyy"}];

function imAutocompleteJSONParse(data) {
    var rows = [];
    var rowData = null;
    var dataLength = data.length;
    for (var i = 0; i < dataLength; i++) {
        rowData = data[i];
        rows[i] = {
            label: rowData.UserName,
            value: rowData.UserName
        };
    }
    return rows;
}

$("#Txt1").autocomplete({
    source: function(request, response) {
        var rows = imAutocompleteJSONParse(myStuff);
        return response(rows);
    },
    minLength: 2
});

For clarity sake, I put this in a fiddle page so you can see it working: http://jsfiddle.net/MarkSchultheiss/TRKeE/

NOW, as I suspect YOU want to do some custom/different stuff with the results, I have created this custom example on how to work with custom values: http://jsfiddle.net/MarkSchultheiss/TRKeE/2/

The difference is I changed the parse function and added a new autocomplete option.

var myStuff = [{
    "uid": "123",
    "UserName": "xxx"},
{
    "uid": "124",
    "UserName": "yyy"}];

function imAutocompleteJSONParse(data) {
    var rows = [];
    var rowData = null;
    var dataLength = data.length;
    for (var i = 0; i < dataLength; i++) {
        rowData = data[i];
        rows[i] = {
            uid: rowData.uid,
            UserName: rowData.UserName,
            label: rowData.UserName,
            value: rowData.uid
        };
    }
    return rows;
}

$("#Txt1").autocomplete({
    source: function(request, response) {
        var rows = imAutocompleteJSONParse(myStuff);
        return response(rows);
    },
    select: function(event, ui) {
        var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null);
        if (hasValue) {
            var focusedElement = $(this);
            focusedElement.val(ui.item.label);
            $('#labelResult').text(ui.item.label);
            $('#valueResult').text(ui.item.label);
            $('#customResult').text(ui.item.uid + ":" + ui.item.UserName);

            return false;
        }
        else {
            return false;
        }
    },
    minLength: 2
});