jquery — php генерирует изображение динамически на основе текста текстового поля

Question

jquery — php генерирует изображение динамически на основе текста текстового поля

Я хочу отобразить изображение или набор изображений рядом с текстовым полем на основе текстов, напечатанных там.
например.

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>

Но проблема в том, что я не знаю, как получить текстовое значение в текстовом поле без отправки (при вводе пользователем). И как динамически заполнить изображение на основе этого?

0

jquery php textbox

Решение

Другие решения

Вам нужен сценарий в качестве источника вашего изображения. Затем вы можете просто изменить источник изображения через JavaScript, когда вы проходите текст, чтобы печатать как параметр GET для этого сценария.

1

Источник

Accepted Answer

В вашем первом файле .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

Но важно то, что событие onchange поля ввода будет происходить только тогда, когда фокус от ввода и изменение текста. Это не выглядит красиво.

1