从自动完成下拉列表中选择用户后，用户名将显示在输入字段中，现在我想显示用户图像。
选择后，默认图像确实会更改，但它不会加载用户图像？
我觉得我错过了一些东西
var img = ui.item.label;
$("#pic").attr("src",img);
我在查找它时看到了一个与此类似的问题(show-image-in-jquery-ui-autocomplete(，但这个问题不使用 json。
请帮忙？
指数。.PHP
<body>
<br />
<br />
<div class="container">
<br />
<div class="row">
<div class="col-md-3">
<img id="pic" src="images/default-image.png">
</div>
<div class="col-md-6">
<input type="text" id="search_data" placeholder="Enter Student name..." autocomplete="off" class="form-control input-lg" />
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search_data').autocomplete({ //gets data from fetch
source: "fetch.php",
minLength: 1,
select: function(event, ui)
{
$('#search_data').val(ui.item.value);
//$("#pic").val(ui.item.img);
var img = ui.item.label;
$("#pic").attr("src",img);
},
})
.data('ui-autocomplete')._renderItem = function(ul, item){ //renders the item in a ul
return $("<li class='ui-autocomplete-row'></li>") //formats the row in css
.data("item.autocomplete", item) //auto complete item
.append(item.label)
.appendTo(ul);
};
});
</script>
获取.php
if(isset($_GET["term"]))
{
$connect = new PDO("mysql:host=localhost; dbname=tests_ajax", "root", "");
$query = "
SELECT * FROM tbl_student
WHERE student_name LIKE '%".$_GET["term"]."%'
ORDER BY student_name ASC
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = array();
if($total_row > 0)
{
foreach($result as $row)
{
$temp_array = array();
$temp_array['value'] = $row['student_name'];
$temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" /> '.$row['student_name'].'';
$temp_array['img'] = '<img src="images/'.$row['image'].'" width="70" />';
$output[] = $temp_array;
}
}
else
{
$output['value'] = '';
$output['label'] = 'No Record Found';
$output['img'] = 'No Record Found';
}
echo json_encode($output);
}
?>
你返回的是整个<img>元素(和其他文本(：
$temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" /> '.$row['student_name'].'';
因此，当您执行此操作时：
var img = ui.item.label;
$("#pic").attr("src",img);
你试图得到的是这样的：
<img id="pic" src="<img src="images/someFile.jpg" width="70" /> Some Name">
当然，这只是一堆语法错误。
如果您只想设置现有<img>的src，则仅返回该src值：
$temp_array['img'] = 'images/'.$row['image'];
并将src设置为该值：
$("#pic").prop("src", ui.item.img);