通过 jQuery/AJAX 将多维 JSON 数据放入不同的输入文本框中

multidimensional json data into different input text boxes through jquery/ajax

本文关键字：输入文本数据 AJAX jQuery JSON 通过更新时间：2023-09-26

>我创建了一个自动完成搜索框，后跟两个输入文本框。

请帮助我如何分配自动完成的选定值的值。

例如，如果我们选择 ajax，则相应的价格应分配给 1003，角色应分配给外国。

我从 php echo 输出中得到的 json 响应是：

{
    "users": [
        {
            "name": "ajax",
            "price": "1003",
            "author": "foriegn"
        },
        {
            "name": "jquery",
            "price": "1000",
            "author": "dd"
        },
        {
            "name": "mysql",
            "price": "1000",
            "author": "f"
        },
        {
            "name": "php",
            "price": "1000",
            "author": "abc"
        },
        {
            "name": "php frameword",
            "price": "1000",
            "author": "def"
        },
        {
            "name": "php tutorial",
            "price": "1000",
            "author": "ghi"
        },
        {
            "name": "wordpress",
            "price": "1000",
            "author": "g"
        },
        {
            "name": "wordpress theme",
            "price": "1000",
            "author": "h"
        },
        {
            "name": "xml",
            "price": "1000",
            "author": "j"
        }
    ]
}

我的JavaScript代码如下：

var counter = 2;
var availableTags = ["php", "php frameword", "php tutorial", "jquery", "ajax", "mysql", "wordpress", "wordpress theme", "xml"];
$("#addButton").click(function () {
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
    var roleInput = $('<input/>', {
        type: 'text',
        placeholder: 'Role',
        name: 'Role' + counter,
        id: 'textbox' + counter
    });
    var priceInput = $('<input/>', {
        type: 'text',
        placeholder: 'price',
        name: 'price' + counter,
        id: 'textbox' + counter
    });
    var searchInput = $('<input/>', {
        type: 'text',
        placeholder: 'search',
        name: 'search' + counter,
        id: 'se' + counter
    });
    var hidd = $('<input/>', {
        type: 'hidden',
        name: 'searchhid' + counter,
        id: 'searchhid' + counter
    });

    newTextBoxDiv.append(searchInput).append(roleInput).append(priceInput).append(hidd);
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    $('#se' + counter).autocomplete({
        source: availableTags
    });
    counter++;
});

当前的小提琴设置为： http://jsfiddle.net/premgowda/UC74L/6/

PS：我对Json和jquery非常陌生。我还没有将 json 输出添加到我的小提琴设置中，因为我不确定该怎么做。

Use jQuery UI autocomlete select event：

http://api.jqueryui.com/autocomplete/#event-select

获得所选值后，找到匹配的对象并选择其其他属性。喜欢这个：

for(i = 0; i < users.length; ++i) {
        (users[i].name == selected) {
        break;
        }
}
price = users[i].price;
author = users[i].author;