嗨,我使用Jquery UI的自动完成功能来获取数据库包含的成分。每个成分都有一个识别它的ID。选择成分后如何获得此ID?
这是带有查询以获取成分的代码
$(function() {
var availableTags =
<?php
$query="SELECT Id,IngredientsName
FROM ingredients";
$result= mysqli_query($connect,$query)
or die ("Error " . mysqli_error());
$ingredients=array();
while ($search=mysqli_fetch_array($result)) {
$ingredientsName=$search[1];
$ingredientsId=$search[0];
array_push($ingredients,"$ingredientsName");
}
echo json_encode($ingredients);
?>
;
$( "#inputIngredients").on("keyup",".IngName",function(){
$(".nomeIng").autocomplete({
source: availableTags,
minLength: 2});
});
});
</script>
最佳答案
首先,您需要在availableTags
数组中包含信息。您应该将数据格式化为对象数组:
var availableTags = [{
id: 1,
label: "Eggs",
}, {
id: 2,
label: "Flour",
}, {
id: 3,
label: "Milk",
}];
在您的PHP中,您可以执行以下操作:
<?php
$query="SELECT Id,IngredientsName
FROM ingredients";
$result= mysqli_query($connect,$query)
or die ("Error " . mysqli_error());
$ingredients=array();
while ($search=mysqli_fetch_array($result)) {
$ingredient = array( id => $search[0], label => $search[1] );
array_push($ingredients, $ingredient);
}
echo json_encode($ingredients);
?>
这将以上述格式返回您的数据。您还可以添加所需的任何其他字段,但请确保您具有可搜索的
label
字段。然后,使用
id
选项,只需在选择选项后使用select
即可。 (我不知道您的html是什么样的,所以我在这里简化了示例):简单的HTML:
<input id="inputIngredients">
<input type="hidden" id="ingredient-id">
JavaScript:
$("#inputIngredients").autocomplete({
source: availableTags,
minLength: 1,
select: function( event, ui ) {
$( "#ingredient-id" ).val( ui.item.id );
$('#inputIngredients').val( ui.item.label );
return false;
}
});
小提琴示例:https://jsfiddle.net/5hf2jaem/1/
为了确保用户选择有效值,可以设置
autoFocus: true
并添加change
处理程序:$("#inputIngredients").autocomplete({
source: availableTags,
minLength: 1,
autoFocus: true,
select: function(event, ui) {
$("#ingredient").text(ui.item.label);
$('#inputIngredients').val(ui.item.label);
$("#ingredient-id").val(ui.item.id);
return false;
},
change: function(event, ui) {
if (ui.item == null) {
$("#ingredient").text("");
$('#inputIngredients').val("");
$("#ingredient-id").val("");
}
},
});
该
change
处理程序仅在字段模糊时检查是否选择了有效值。演示:https://jsfiddle.net/5hf2jaem/3/