我想根据在文本框中键入的文本，在文本框旁边显示一个图像或一组图像。例如
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>
但困难在于，我不知道如何在没有提交的情况下（当用户键入时）在文本框中获得文本值。如何在此基础上动态填充图像？
在你的第一个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
但重要的是，只有当焦点从输入中移开，并且文本发生更改时，才会发生输入框的更改事件。它看起来不好看。
您需要一些Script作为图像的来源。然后，您可以通过JavaScript简单地更改图像的来源，因为您通过文本将其作为GET参数打印到此脚本。