php - 对图像使用 Jquery 自动完成

Question

我正在使用 foxycomplete 下面的代码从我的数据库中获取一些带有图像的结果。 使用本地文件效果很好，但我不能使用 mysql。

这是我正在使用的代码..

<form id="autocompleteForm" name="autocompleteForm" action="" method="post">
    <input type="text" name="s" id="s" value="Search" style="border:none;" />
</form>

Javascript 代码:

(function($) {
    $(document).ready(function() {


        $( '#s' ).each( function(){
        $(this).attr( 'title', $(this).val() )
          .focus( function(){
            if ( $(this).val() == $(this).attr('title') ) {
              $(this).val( '' );
            }
          } ).blur( function(){
            if ( $(this).val() == '' || $(this).val() == ' ' ) {
              $(this).val( $(this).attr('title') );
            }
          } );
        } );

        $('input#s').result(function(event, data, formatted) {
            $('#result').html( !data ? "No match!" : "Selected: " + formatted);
        }).blur(function(){     
        });

        $(function() {      
        function format(mail) {
            return "<a href='"+mail.permalink+"'><img src='" + mail.image + "' /><span class='title'>" + mail.title +"</span></a>";         
        }

        function link(mail) {
            return mail.permalink
        }

        function title(mail) {
            return mail.title
        }

        $("#s").autocomplete(completeResults, {
            width: $("#s").outerWidth()-2,          
            max: 5,         
            scroll: false,
            dataType: "json",
            source: "video_search.php",
            matchContains: "word",
            parse: function(data) {
                return $.map(data, function(row) {
                    return {
                        data: row,
                        value: row.title,
                        result: $("#s").val()
                    }
                });
            },
            formatItem: function(item) {                
                return format(item);
            }
            }).result(function(e, item) {
                $("#s").val(title(item));
                //location.href = link(item);
            });                     
        });

    });
})(jQuery);

以及检索我的数据的 php 代码:

<?php
require "connectiondb.php";

if(isset($_REQUEST['s']))
{

$queryString = mysql_real_escape_string($_REQUEST['s']);

echo'var completeResults = [{';

$ss = mysql_query ("SELECT title, image FROM users WHERE title LIKE '$queryString%' LIMIT 7");
while($result = mysql_fetch_assoc($ss)) {   

echo '  
    "permalink": "index.html",
    "image": "'.$result['image'].'",
    "title": "'.$result['title'].'"
},';

}

echo '}];';


}else{

}
?>

谢谢你们!!!

Answer 1

$result['image'] 里面有什么？如果它包含图像文件本身(二进制数据)而不仅仅是路径，那么您需要再创建一个文件(image.php？s = id)，它将只检索具有足够标题的二进制数据..即

<?php

header('Content-Type: image/jpeg'); 

// sql stuff 

echo $result['image'];

?>

在你的主文件中你将调用

"image": "'.image.php?id='.$result['id'].'",

另外，不要折磨自己并使用 json_encode() :)