jquery - 将加载图像添加到用于实时搜索

Question

我需要在我的实时搜索引擎中添加一个小的加载图像（根据照片），以便在搜索结果出现之前显示它，因为我有几个从数据库调用的图像，可能需要一些时间来加载，当结果加载加载图像淡出

我的脚本代码是：

   <script> 
    // Start Ready
    $(document).ready(function() {  

        // Icon Click Focus
        $('div.icon').click(function(){
            $('input#search').focus();
        });

        // Live Search
        // On Search Submit and Get Results
        function search() {
            var query_value = $('input#search').val();
            $('b#search-string').html(query_value);
            if(query_value !== ''){
                $.ajax({
                    type: "POST",
                    url: "search.php",
                    data: { query: query_value },
                    cache: false,
                    success: function(html){
                        $("ul#results").html(html);
                    }
                });
            }return false;    
        }

        $("input#search").live("keyup", function(e) {
            // Set Timeout
            clearTimeout($.data(this, 'timer'));

            // Set Search String
            var search_string = $(this).val();

            // Do Search
            if (search_string == '') {
                $("ul#results").fadeOut();
                $('h4#results-text').fadeOut();
            }else{
                $("ul#results").fadeIn();
                $('h4#results-text').fadeIn();
                $(this).data('timer', setTimeout(search, 100));
            };
        });

    });
</script>

我的 HTML 代码是：

<div id="main">

        <input name="Search" type="text" id="search" autocomplete="off" onfocus="if (this.value == 'Search by item name or number')
 {this.value = '';}" onblur="if (this.value == '')
 {this.value = 'Search by item name or number';}" 
value="Search by item name or number">
        <!-- Show Results -->

    <ul id="results" style="height:350px;  overflow-x:hidden ; overflow-y: scroll; padding-bottom:10px; color:#FFF"></ul>
</div>

提前致谢

Answer 1

尝试这个？

在 keyup 上，将加载图像附加到 ul，在结果之后，再次隐藏它。

// Start Ready
$(document).ready(function() {  

    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });

    // Live Search
    // On Search Submit and Get Results
    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    // remove loading gif
                    $("ul#results").html('');
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {

        // show loading gif after keying 3 characters
        if($(this).val().length >= 3)
            $("ul#results").append('<li><img src="yourLoadingImg.gif" /></li>');

        // Set Timeout
        clearTimeout($.data(this, 'timer'));

        // Set Search String
        var search_string = $(this).val();

        // Do Search
        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }
        if(search_string.length >= 3){
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        }
    });

});