如何使用带有AJAX JSON数据的jQuery自动完成组合框？
如何使用带有AJAX JSON数据的jQuery自动完成组合框？
我需要使用下拉框(comboBox)来完成以下操作：\n
- \n
选择框默认具有城市列表，用户可以从中搜索。- 如果用户在
输入框中输入文本，我需要进行ajax调用以获取数据并向用户显示选项。 - 如果为用户请求获取到数据，则这些城市应追加到
选择框的选项中。
\n
\n
\n
\n使用jQuery自动完成，我能够在用户输入字符串并显示结果时获取JSON数据。然而，我对如何使用下拉框进行整合感到困惑。\n下拉框使用静态数据数组进行搜索，如果我理解正确，它使用正则表达式来匹配值。但是，我如何中断它并使用ajax调用从服务器获取数据并更新结果呢？\n输入框的自动完成：\n
$( "#searchDestination" ).autocomplete({
delay: 500,
source: function( request, response ) {
$.ajax({
url: "/wah/destinationsJson.action",
dataType: "json",
data: {
term: request.term
},
type: "POST",
success: function(data){
if(data.cities.length == 0)
return response(["No matching cities found for " + request.term]);
response( $.map(data.cities, function(item){
return{
label: item.name,
value: item.name
};
})
);
}
});
},
minLength: 2
});
});
使用jQuery自动完成组合框与AJAX JSON数据的方法？
为什么不复制插件和两个组合框。
然后：
$( "#combobox1" ).combobox1({
select: function (event, ui) {
var value = ui.item.value;/*无论您选择的是什么*/
$.ajax({
type: "POST",
dataType: 'json',
url: "script.php",
data: {
'anything':value
},
success: function(res)
{
/*用新的替换下一个组合框*/
$("select#combobox2").html(res);
}
});
}
});
$( "#toggle" ).click(function() {
$( "#combobox1" ).toggle();
});
$( "#combobox2" ).combobox2();
$( "#toggle" ).click(function() {
$( "#combobox2" ).toggle();
});
PHP文件（基于Codeigniter）：
<?php
$data['response'] = 'false';
$keyword = $_POST['anything'];
$query4 = $this->db->query("SELECT * FROM table WHERE field='".$keyword."'");
$data.= "<option></option>";
if($query4->num_rows() > 0)
{
foreach($query5->result_array() as $row)
{
$data.= "<option>".$row['something']."</option>";
}
}
echo json_encode($data);
}
?>
希望对你有所帮助。
