Question

我想在文本框旁边显示一个图像或一组图像，这些图像或图像集基于那里输入的文本。例如。

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>

但困难在于我不知道如何在没有提交的情况下在文本框中获取文本值（当用户输入时）。以及如何根据它动态填充图像？

Answer 1

您需要一些脚本作为图像的来源。然后，您可以通过JavaScript更改图像源，当您通过文本打印为GET参数到此脚本。

Answer 2

在你的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

但重要的是输入框的onchange事件只有在从输入聚焦并且文本发生变化时才会发生。看起来不太好看。

php基于文本框文本动态生成图像

2 个答案: