Jquery 将加载图像添加到<；ul>；实时搜索

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

我的脚本代码是：

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

//准备就绪
$（文档）.ready（函数（）{
//图标单击焦点
$（'div.icon'）。单击（函数（）{
$（'input#search'）.focus（）；
});
//实时搜索
//搜索时提交并获取结果
函数搜索（）{
var query_value=$（'input#search'）.val（）；
$（'b#搜索字符串'）.html（查询值）；
如果（查询值！=''）{
$.ajax({
类型：“POST”，
url:“search.php”，
数据：{query:query\u value}，
cache:false，
成功：函数（html）{
$（“ul#results”）.html（html）；
}
});
}返回false；
}
$（“输入搜索”）.live（“键控”，功能（e）{
//设置超时
clearTimeout（$.data（此为“计时器”）；
//设置搜索字符串
var search_string=$（this.val（）；
//搜索
如果（搜索字符串==''）{
$（“ul#results”）.fadeOut（）；
$（'h4#结果文本'）.fadeOut（）；
}否则{
$（“ul#results”）.fadeIn（）；
$（'h4#结果文本'）.fadeIn（）；
$（this）.data（'timer'，setTimeout（search，100））；
};
});
});

我的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>

提前谢谢

试试这个

在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));
        }
    });

});

//启动准备就绪
$（文档）.ready（函数（）{
//图标单击焦点
$（'div.icon'）。单击（函数（）{
$（'input#search'）.focus（）；
});
//实时搜索
//搜索时提交并获取结果
函数搜索（）{
var query_value=$（'input#search'）.val（）；
$（'b#搜索字符串'）.html（查询值）；
如果（查询值！=''）{
$.ajax({
类型：“POST”，
url:“search.php”，
数据：{query:query\u value}，
cache:false，
成功：函数（html）{
//删除加载gif
$（“ul#results”）.html（“”）；
$（“ul#results”）.html（html）；
}
});
}返回false；
}
$（“输入搜索”）.live（“键控”，功能（e）{
//键入3个字符后显示加载gif
如果（$（this）.val（）.length>=3）
$（“ul#results”）。追加（“
”）；
//设置超时
clearTimeout（$.data（此为“计时器”）；
//设置搜索字符串
var search_string=$（this.val（）；
//搜索
如果（搜索字符串==''）{
$（“ul#results”）.fadeOut（）；
$（'h4#结果文本'）.fadeOut（）；
}
如果（搜索字符串长度>=3）{
$（“ul#results”）.fadeIn（）；
$（'h4#结果文本'）.fadeIn（）；
$（this）.data（'timer'，setTimeout（search，100））；
}
});
});

您很完美，非常感谢，还有一件事，请您调整此图像，使其仅在键入三个字母后显示？！。。。。再次感谢，我已经搜索了两天。再次检查我的更新答案，添加显示图像的条件…如果（$（this）.val（）.length>=3）…如果可能&我可能很麻烦，我希望在输入框中写下三个字母后，滑动窗口才会消失，我认为这是//DO Search//中的一个小代码，放在代码的末尾，再次感谢。nvm，再次检查更新答案，试试这个。。。否则，如果（search_string.length>=3）…您很出色，它工作正常，但结果停止显示，它只显示加载图像并继续加载。。。。