![](/img/trans.png)
[英]jQuery multidimensional JSON array with different data in the same JSON?
[英]multidimensional json data into different input text boxes through jquery/ajax
我創建了一個自動完成搜索框,后跟兩個輸入文本框。
請幫助我如何分配自動完成功能的選定值。
對於前。 如果我們選擇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輸出添加到我的小提琴設置中,因為我不確定該怎么做。
使用jQuery UI自動完成選擇事件:
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.