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

报告相同问题？

悬赏问题

  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan