duanji9264 2014-09-17 03:56
浏览 42
已采纳

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

I want to display an image or set of images next to a textbox base on the texts typed there. eg. 

If type "cat" it displays image "cat.jpg" or type "ca" it displays "car.jpg" and "cat.jpg"

I am trying this:

    <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>

But the difficulty is I don't know how to get text value in textbox without submit (when user typing). And how to populate image dynamically based on that?

  • 写回答

2条回答 默认 最新

  • dongyoulou4829 2014-09-17 04:37
    关注

    In your first.php file write this : 

    <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>

    In your 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 give facility for auto suggestion:

    <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>

    for reference see : http://devproconnections.com/html5/working-html5-web-forms-autocompletion-and-datalist-element

    But important thing is onchange event of input box will occurs only when focus out from input and if text is change. It not look nice.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题：CANOpen的PDO同步传输问题