在圖像中使用jquery自動完成功能

我正在使用foxycomplete的代碼來從數據庫中獲取圖像的一些結果。本地文件很好，但我不能用mysql來做。在圖像中使用jquery自動完成功能

這裏是我的代碼，我使用..

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

} 
?>

謝謝你們！

來源

2013-11-02 Irene T.

你需要一個完整的URL在「源」，而不是隻PHP的文件名？ –

'$（'#s'）.each ...'？應該只有一個'$（'s'）ids應該是唯一的 – Popnoodles

打開你的控制檯（在Firefox中使用firebug擴展，在Chrome中右擊，選擇Inspect Element，點擊Console選項卡），你可能會看到一個404錯誤。告訴我們有什麼錯誤，如果有的話。 – Popnoodles

$ 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（）:)

來源

2013-11-12 02:07:48 acidofil

在圖像中使用jquery自動完成功能

回答

相關問題