Question

我想知道如何将搜索结果限制在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>

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

Answer 1

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

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

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

限制搜索结果Javascript

1 个答案: