Как установить ключ \ значение в элементе управления автозаполнения jQuery с данными json?

Question

Как я могу использовать эти данные json в качестве источника данных автозаполнения jquery?

[{"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

Я обнаружил, что при использовании возвращаемых значений рекомендуется создавать функцию синтаксического анализа.Это позволяет вам делать то, что вы хотите с вашим возвращенным JSON.В этом примере кода я не обращаюсь к вызову ajax, но могу добавить и это, если вам нужно.jQuery UI Autocomplete ищет метку и значение объекта.Вы можете поместить любой из них так, как считаете нужным, или даже сделать что-то нестандартное, если необходимо.

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
});

Для ясности я поместил это на страницу скрипки, чтобы вы могли видеть, как она работает: http://jsfiddle.net/MarkSchultheiss/TRKeE/

СЕЙЧАС, так как я подозреваю, что ВЫ хотите сделать что-то особенное / другое с результатами, я создал этот собственный пример о том, как работать с настраиваемыми значениями: http://jsfiddle.net/MarkSchultheiss/TRKeE/2/

РазницаЯ изменил функцию разбора и добавил новую опцию автозаполнения.

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
});

Answer 2

действительно очень просто

$('#Txt1').autocomplete({source: 'URL to your JSON file / script'});

и если ваш код действительно странный и вы хотите добавить json в виде строки, используйте

$('#Txt1').autocomplete({source: $.parseJSON(your_string) });