限制搜索结果Javascript

时间:2013-07-08 06:12:12

标签: javascript jquery

我想知道如何将搜索结果限制在Javascript文件中,我的JS文件详细信息如下:

    /* JS File */
   <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

我只需要添加类似于以下代码的代码,以便能够在结果之前加载加载图像,并将结果限制为五个或其他任何内容,如果可能的话,稍后再添加加载。

    <script>
function loadSearch(query) {
    document.body.style.overflow='hidden';
    if (typeof xhr != "undefined") {
        xhr.abort();
        clearTimeout(timeout);
    }

    if (query.length >= 3) {
        timeout = setTimeout(function () {
            $('#moreResults').slideDown(300);
            $('#search_results').slideDown(500).html('<br /><p align="center"><img src="http://www.tektontools.com/images/loading.gif"></p>');
            xhr = $.ajax({
                url: 'http://www.tektontools.com/search_results.inc.php?query='+encodeURIComponent(query),
                success: function(data) {
                  $("#search_results").html(data);
                }
            });
        }, 500);
    } else {
        unloadSearch();
    }
}
function unloadSearch() {
    document.body.style.overflow='';
    $('#search_results').delay(100).slideUp(300);
    $('#moreResults').delay(100).slideUp(300);
}
</script>

我从另一个模板页面获得了第二个代码,我只是没有调整它以适应我的搜索模板(第一个代码),如果有人可以帮我调整它,我会很感激,非常感谢。

1 个答案:

答案 0 :(得分:0)

如果你想在javascript端执行此操作,可以使用slice

$.ajax({
   type: "POST",
   url: "search.php",
   data: { query: query_value },
   cache: false,
   success: function(html){
      $("ul#results").html(html.slice(0, 5);
   }
});

我个人建议您对服务器端的行进行限制,以最大限度地减少在客户端和服务器之间传输的数据量。