Автозаполнение jQuery с использованием данных JSON
Представьте себе файл json со следующими данными:
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
}
]
Используя метод автозаполнения jQuery, я хочу, чтобы он мог отображатьcolor как варианты, чтобы выбрать и вставитьvalue на входе.
<input type="text" name="selector" id="selector" />
<input type="text" name="color" id="color" />
<input type="text" name="value" id="value" />
Вышесказанное не нуждается в представлении. Селектор для поиска по цветам,input.color
сcolor значение иinput.value
сvalue значение.
EDIT: У меня есть эти данные JSON:
[{
"label": "Sec\u00e7\u00e3o 1",
"value": "1"
}, {
"label": "Sec\u00e7\u00e3o 2",
"value": "2"
}, {
"label": "Sec\u00e7\u00e3o 3",
"value": "3"
}, {
"label": "Sec\u00e7\u00e3o 4",
"value": "4"
}]
и этот HTML:
<input type="text" id="name" />
<input type="text" id="value" />
и этот JQuery:
$(document).ready(function(){
$("#name").autocomplete({
source: "json.php",
select: function (event, ui) {
$("#name").val(ui.label);
$("#value").val(ui.value);
}
});
});
Я следовал за ответом Эндрю, и он побуждает меня выбирать данные, но если я предупреждаюui.label
а такжеui.value
переменные, он говорит "неопределенный". Что мне не хватает?
Edit2: Допустим, у меня есть этот HTML:
<input type="text" class="name" />
<input type="text" class="value" />
<input type="text" class="name" />
<input type="text" class="value" />
Можно ли обрабатывать несколько селекторов с одинаковыми.autocomplete()
метод? Например, выберите нужную метку, используяinput.name
и только обновитьinput.value
рядом с этим?
[input.name] [input.value]
^ Я выбираю & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; ^ обновляет
& # xA0; & # xA0; метка & & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; & # xA0; значение рядом с ним
[input.name] [input.value]
^ это остается нетронутым ^