使用Jquery自动完成图像

Question

I am using the code bellow of foxycomplete to get some results from my db with images. With local files works great but i cant do it with mysql.

Here is my code that i am using..

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

The Javascript Code:

(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);

And the php code to retrieve my data:

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

}
?>

Thank you Guys!!!

Answer 1

Whats inside the $result['image']? If it contains the image file itself(binary data) and not just the path, then you need to create one more file (image.php?s=id) which would retreive just that binary data with adequate header.. ie

<?php

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

// sql stuff 

echo $result['image'];

?>

In your main file you'll then call just

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

also, dont torture yourself and use json_encode() :)