javascript - 如何将从 JSON API 获取的自动完成数据推送到文本框？

Question

我正在尝试以自动完成 jQuery 方法获取值并将选定的输入值存储到文本框中(推送到文本框)。听起来很简单，但是这个 JSON 模式有点花时间。

我可以在这里获得快速帮助吗？

http://jsfiddle.net/ebPCq/1/

jQuery 代码:

    $("#material_number").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "json",
            data: {
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        // following property gets displayed in drop down
                        label: item.name + ", " + item.countryName,
                        // following property gets entered in the textbox
                        value: item.name,
                        // following property is added for our own use
                        my_description: item.fcodeName
                    }
                }));
            }
        });

Answer 1

在修复并最终确定初始功能后，我得出结论，用这个 fiddle 作为上面发布的查询的解决方案。

http://jsfiddle.net/ebPCq/7/

JS 代码:

$(function () {
$("#input").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "json",
            data: {
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        // following property gets displayed in drop down
                        label: item.name + ", " + item.countryName,
                        // following property gets entered in the textbox
                        value: item.name,
                        // following property is added for our own use
                        my_description: item.fcodeName
                    }
                }));
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        if (ui.item) {
            $("#push-input").prepend(ui.item.value + '\r\n');
        }
    }
  });
});