php基于文本框文本动态生成图像
php基于文本框文本动态生成图像
提问于 2014-09-17 03:56:33
我想在文本框旁边显示一张或一组图片，这个文本框是基于输入的文本的。例如：
If type "cat" it displays image "cat.jpg" or type "ca" it displays "car.jpg" and "cat.jpg"我正在尝试这样做：
<script>
$(document).ready(function(){
//do something here???
});
</script>
</head>
<body>
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$host = 'localhost';
$db = 'mydb';
$user = 'username';
$pass = '';
mysql_connect($host, $user, $pass);
mysql_select_db($db);
$NameImage = mysql_query("SELECT `name` from `mydb`.`mytable` where `description` LIKE '%$my_data%' ORDER BY `name` ");
$rowName = mysql_fetch_array($NameImage);
?>
<label>Tag:</label>
<input name="tag" type="text" id="tag" size="20"/> <img src = "myimagepath/<?php echo $rowName[0] ?>.jpg" height="140">
</body>
</html>但困难在于，我不知道如何在文本框中不提交(当用户输入时)获得文本值。如何在此基础上动态填充图像？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-17 04:37:27
在您的first.php文件中，编写以下内容：
<script src="js/jquerymin.js"></script>
<script>
function getImage(value)
{
$.ajax({
url: 'getImage.php',
type: "POST",
data: {
'value' : value,
},
beforeSend : function() {
},
success : function(response) {
$('.main-content').html(response);
},
error : function() {
},
complete : function() {
}
});
}
</script>
<body>
<label>Tag:</label>
<input name="tag" type="text" id="tag" size="20" onkeyup="getImage(this.value);"/>
<div class="main-content"></div>
</body>
</html>在你的getImage.php里
<?php
$host = 'localhost';
$db = 'mydb';
$user = 'username';
$pass = '';
mysql_connect($host, $user, $pass);
mysql_select_db($db);
$val = $_POST['value'];
$sql_img="SELECT `name` from `mydb`.`mytable` where `description` LIKE '%$val%' ORDER BY `name`";
$result=mysql_query($sql_img, $con);
while($row=mysql_fetch_array($result))
{
echo "<img src='myimagepath/".$row[name]."'/>";
echo "<br>";
}
?>HTML5为汽车建议提供便利：
<input type="text" name="tag" id="tag" list="sometag" onchange="alert(this.value);" />
<datalist id="sometag">
<select onchange="$('#tag').val(this.value)">
<?php
//select option list from data base
?>
</select>
</datalist>有关参考资料，请参阅：http://devproconnections.com/html5/working-html5-web-forms-autocompletion-and-datalist-element
但重要的是，只有当焦点从输入输出和文本发生变化时，才会发生输入框的变化事件。看起来不太好。
Stack Overflow用户
发布于 2014-09-17 04:01:30
你需要一些脚本作为你的图像的来源。然后，您可以通过JavaScript简单地更改图像源，通过文本打印这个脚本的GET参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25882043
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号