圖像AJAX搜索不適用於Safari

我有一個實時圖像搜索，使用AJAX和SQL查詢來查找名稱與用戶在文本字段上輸入相同的圖像。我認爲它工作正常，直到我在Safari中進行測試，它確實沒有任何問題。圖像AJAX搜索不適用於Safari

我不太確定爲什麼即使在Safari中返回錯誤，有沒有人知道Safari中的問題可能會阻止它工作？

的jQuery：

var input = $('.image-search'); 
var value; 

var append = $(".results-append"); 
var loadUrl = '/stock-image-search.php'; 

var results = $('.results'); 

var resultsDiv = '<div class="results-heading"><h2>Results for "<span class="results-for"></span>"</h2></div>'; 
var resultsFor; 

var nothingFound = '<div class="nothing-found"><br /><span>No results found.</span></div>' 


// on keyup 
input.on("keyup", function() { 

    // remove everything that was there 
    $('.results-append').remove(); 
    results.empty(); 
    $("#temp_load").remove(); 

    value = input.val(); 
    append.prepend(resultsDiv); 

    resultsFor = $('.results-for'); 
    resultsFor.html($(this).val()); 

    // ajax the results! 
    $.ajax({ 
     type: "GET", 
     data: { 
      nameLike: value 
     }, 
     dataType: "html", 
     url: templateDir + loadUrl, 
     beforeSend: function() { 
      append.hide().append('' + 
       '<div id="temp_load" class="search-loader">' + 
        '<img src="' + templateDir + '/img/load.GIF" />' + 
       '</div>' 
      ).fadeIn(200); 
     }, 
     success: function(data) { 

      $("#temp_load").fadeOut(200); 

      // fix for fast typers 
      results.empty(); 

      var data = $(data); 
      if (data.length) { 
       results.append(data); 
      } else { 
       results.append(nothingFound); 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      $("#temp_load").fadeOut(200).remove(); 
      console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown); 
     } 
    }); 

});

PHP函數：

<?php 

include_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php'); 

global $wpdb; 

if(isset($_GET['nameLike']) && strlen($_GET['nameLike']) > 1) : 


    $search = $_GET['nameLike']; 

    $results = $wpdb->get_results($wpdb->prepare(" 
     SELECT ID 
     FROM $wpdb->posts 
     WHERE $wpdb->posts.post_status = 'inherit' 
     AND $wpdb->posts.post_mime_type != '' 
     AND ($wpdb->posts.post_author = 1 OR $wpdb->posts.post_author = 3) 
     AND $wpdb->posts.post_title LIKE %s 
    ", '%' . like_escape($search) . '%' 
    ), ARRAY_A); 


    foreach ($results as $result) : ?> 


     <?php 
      $image = wp_get_attachment_image($result[ID], array(200, 150)); 
     ?> 

     <div class="grid-1-4 clearfix"> 
      <div class="stock-image-select clearfix" data-id="<?php echo $result[ID]; ?>"> 
       <?php echo $image; ?> 
      </div> 
     </div> 

    <?php endforeach; 


else : ?> 

    <div class="grid-10">Your search needs to be at least 2 characters long.</div>   

<?php endif; ?>

如果任何人都可以看到一個明顯的錯誤，請讓我知道:)

來源

2014-07-02 lukeseager

您是否嘗試過按鍵或鍵控？ http://api.jquery.com/keypress/ –

剛剛試過這個，沒有運氣仍然:( – lukeseager

把一個console.log在綁定中，看看它是否按下按鍵時觸發... $（'something' ）.keyup（function（e）{console.log（'here'）;} ...）;如果它在瀏覽器的控制檯中觸發[按CTRL + ALT + I]，那麼JS不是問題 –

嘗試是這樣的

$(document).ready(function() { 
    $('input[name="search_field"]').keyup(function(e){ 
     $(this).text; 
     //process your search 
     }); 
});

當您檢測到關鍵是提出然後採取文字，並進行搜索。

來源

2014-07-02 08:47:21

圖像AJAX搜索不適用於Safari

回答

相關問題