图片AJAX搜索在Safari中不起作用

Question

我有一个实时图像搜索，它使用AJAX和SQL查询来查找名称与用户在文本字段中输入的名称相同的图像。在我在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; ?>

如果任何人能看到明显的错误，请让我知道:)

Answer 1

试试这样的东西

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

当您检测到一个键被触发时，然后获取文本并进行搜索。