如何使用 json 数据在 jQuery Autocomplete 控件中设置键\值？答案

【问题标题】：How to set the key\value within the jQuery Autocomplete control with json data?如何使用 json 数据在 jQuery Autocomplete 控件中设置键\值？
【发布时间】：2012-02-19 22:07:21
【问题描述】：

如何使用这个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>

【问题讨论】：

这个 JSON 是否来自 ajax 调用？
是的，它来自 ajax 调用

标签： jquery asp.net jquery-ui autocomplete

【解决方案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
});

【讨论】：

非常感谢。但是当我输入文本框时，它会显示所有项目。它应该只显示匹配的项目。
是的，这是由于我处理结果数组的方式。我在发送之前根据输入的文本过滤我的结果。如果您不希望这样做，您可以在阵列上使用 .push() - 例如，如果您预加载阵列。就我而言，我有数以万计的结果，需要在服务器端完成过滤。
谢谢你——选择事件和键、值位的组合对我来说真的很有用。

【解决方案2】：

真的很简单

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

如果你的代码真的很奇怪，并且你想将 json 添加为字符串，请使用

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

【讨论】：

如果我想直接将json作为数据源而不是url怎么办？