限制搜索结果Javascript

Limiting search results Javascript

本文关键字:Javascript 搜索结果      更新时间:2023-09-26

我想知道如何限制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>

我从另一个模板页面上得到了第二个代码,我只是没能调整它来适应我的搜索模板(第一个代码),如果有人能帮我调整它,我将不胜感激,非常感谢。

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

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

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