0

我有一个漫画网站。它的一个功能是允许用户搜索漫画……搜索将立即解析输入并根据匹配的标题和关键字返回缩略图结果。

最初,搜索将返回所有结果,并且边界搜索框将无限向下扩展,包含每个漫画结果。我认为将结果限制为 4 个可能是一个不错的选择,如果用户选择这样做,则显示类似“加载 5 个剩余图像”的消息。

如果他们单击该消息,我希望限制 php 变量被删除或更改。

到目前为止,它加载了限制,并显示了一个链接......

在此处输入图像描述

编辑:最新代码:

search_field.php(页面中包含的搜索文件...此文件通过 JQuery 调用 search.php):

<?php $site = (isset($_GET['site']) ? ($_GET['site']) : null); ?>

<div id="sidebar" class="searchborder">
<!--Allow users to search for comic-->
<!--<span class="search">Search for <?php// echo (($site == "artwork") ? 'artwork' : 'a comic'); ?> </span>-->

<script type="text/javascript">

    function GetSearch(mySearchString){
     $.get("./scripts/search.php", {_input : mySearchString, _site : '<?php echo $site ?>'},
            function(returned_data) {
                $("#output").html(returned_data);
            }
        );

    }

</script>
<center>
    <table>
        <tr>
            <td>

                <span class="search">
                <img src="./images/SiteDesign/Search.png" />
                    <input type="text" onkeyup="GetSearch(this.value)" name="input" value="" />
                    <!--<input id="site" type="hidden" value="<?php// echo $site; ?>">-->
                </span>
            </td>
        </tr>
    </table>
</center>
<span id="output">  </span>

 </div>

search.php,用于解析字符串并返回结果的文件:

<?php
//Query all images:
include 'dbconnect.php';


$site = $_GET['_site'];
$input = (isset($_GET['_input']) ? ($_GET['_input']) : 0); 
$siteChoice = (isset($_GET['_choice']) ? ($_GET['_choice']) : $site);
$start = (isset($_GET['_start']) ? ($_GET['_start']) : null);

echo "start: " . $start;


//if user goes to hittingtreeswithsticks.com... no "site" value will be set... so I need to set one
if ($site == null) {
$site = "comics";
}

if ($siteChoice == "artwork") {
$sql = "SELECT id, title, keywords, thumb FROM artwork";
$thumbpath = "./images/Artwork/ArtThumbnails/";
}
else if ($siteChoice == "comics") {
$sql = "SELECT id, title, keywords, thumb FROM comics";
$thumbpath = "./images/Comics/ComicThumbnails/";
}
else {
$sql = "SELECT id, title, keywords, thumb FROM $site";
if ($site == "artwork") {
    $thumbpath = "./images/Artwork/ArtThumbnails/";
}
else {
    $thumbpath = "./images/Comics/ComicThumbnails/";
}
}
/* For this to work, need all comics replicated in an "All Comics" file along with "All Thumbnails"
else {
$sql = "SELECT id, title, thumb FROM comics 
        UNION 
        SELECT id, title, thumb FROM artwork";
$thumbpath = "./images/AllThumbnails/";
}*/


$imgpaths = $mysqli->query($sql);
mysqli_close($mysqli);

$idresult = array();
$imgresult = array();
$thumbresult = array();

//CHECK IF $INPUT == IMAGE PATH
if (strlen($input) > 0)
{
while ($row = $imgpaths->fetch_assoc()) 
{
    //query against key words, not the image title (no one will remember the title)
    if (stripos($row['keywords'], $input) !== false || strtolower($input)==strtolower(substr($row['title'],0,strlen($input))))
    //if (strtolower($input)==strtolower(substr($row['title'],0,strlen($input))))
    {
        array_push($idresult, $row['id']);
        array_push($imgresult, $row['title']);
        array_push($thumbresult, $row['thumb']);
    }
}   
//ECHO RESULTS ARRAY 
if(count($imgresult) == 0) 
{
    echo "<p>no suggestions</p>";
}
else 
{

    echo "<ul>";
        $k = 0;
        $max = 4;
        if (count($imgresult) > $max) {
            while ($k < count($imgresult) && $k < $max)
            {
                echo '<li>
                        <span class="sidebarimages"><a href=".?action=viewimage&site=' . $siteChoice . '&id=' . $idresult[$k] . '">
                        <img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&mw=90&mh=90"/></a></span>
                      </li>'; 
            $k++;
            }
            $difference = count($imgresult)-$k;
            echo "<br/><i><a href='.?action=homepage&site=" . $siteChoice . "&start=4'  class='loadSearch'>load " . $difference  . " more result" . (($difference != 1) ? 's' : '') . "... </a></i>";
        }
        else {
            while ($k < count($imgresult))
            {
                echo '<li>
                        <span class="sidebarimages"><a href=".?action=viewimage&site=' . $siteChoice . '&id=' . $idresult[$k] . '">
                        <img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&mw=90&mh=90"/></a></span>
                      </li>'; 
            $k++;
            }
        }




    echo "</ul>";
}
}
?>
<script type="text/javascript">

$(".loadSearch").click(function() {

//alert("Test");

$.get("./search.php", {_start : 4}, 
    function (returned_data) {
        $("#moreResults").html(returned_data);
    }
);


});
</script>
4

4 回答 4

1

试试这个:

<script type="text/javascript">

$("#loadSearch").click(function() {
    $.get('URL WITH QUERY', function(data) {
        $('#results').html(data);
    });
});

</script>
于 2013-02-14T06:38:30.080 回答
1

从我得到的所有你需要的是,当单击“加载更多”时,只应显示新结果。

加载更多必须是与您的搜索 url 相同的 url。

Search/Autocomplete URL - example.com/autocomplete?q=xkd
Load More URL - example.com/autocomplete?q=xkd&start=4&max=1000

只需在您的网址中添加两个参数。start and max. 将它们传递给您的查询,您将获得准确的结果。

仅验证Start < Maxand 是整数intval()而不是 0 empty()。此外,如果Max <= 4那么不显示负载更多。

于 2013-02-14T07:49:17.970 回答
1

我会把你所有的结果都还给我,然后试着确定你的结果。如果超过 4 个,则循环出前 4 个结果。如果用户单击加载更多按钮,您将从第 4 个元素开始循环。这样,您只需访问服务器一次(每次搜索)。

尝试以 json 格式返回结果,以便您可以在 html 文件中按照自己喜欢的方式对其进行格式化。

在伪代码中:

searchTerm = 'hello';
resultsFromServer = getResults($searchterm);
resultcounter = count(resultsFromServer);

if(resultcounter > 4)

   loop 4 results

else

   loop all results


$(".loadSearch").click(function(e) {

//alert("Test");

e.preventDefault();

$.get("./search.php", {_start : 4}, 
    function (returned_data) {
        $("#moreResults").html(returned_data);
    }
);
于 2013-02-14T07:56:48.890 回答
0

我最终选择了 jquery 显示和隐藏功能。

PHP 片段:

//ECHO RESULTS ARRAY 
if(count($imgresult) == 0) 
{
    echo "<p>no suggestions</p>";
}
else 
{

    echo "<ul>";
        $k = 0;
        $max = 4;

            while ($k < count($imgresult) && $k < $max)
            {
                echo '<li>
                        <span class="sidebarimages"><a href=".?action=viewimage&site=' . $siteChoice . '&id=' . $idresult[$k] . '">
                        <img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&mw=90&mh=90"/></a></span>
                      </li>'; 
                $k++;
            }

            $difference = count($imgresult)-$k;

            echo '<div id="moreResults">';
            while ($k < count($imgresult))
            {
                echo '<li>
                        <span class="sidebarimages"><a href=".?action=viewimage&site=' . $siteChoice . '&id=' . $idresult[$k] . '">
                        <img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&mw=90&mh=90"/></a></span>
                      </li>';

                $k++;
            }
            echo '</div>';


        if (count($imgresult) > $max) {
            ?>
            <br /><a href="#" id="showMore">Load <?php echo $difference; ?> more result<?php echo (($difference != 1) ? 's' : ''); ?>...</a>
            <?php
        }

    echo "</ul>";
}
}

查询:

<script type="text/javascript">
$("#moreResults").hide();

$("#showMore").click(function() {
    $("#moreResults").show();
    $("#showMore").hide();

});

于 2013-02-20T00:33:52.980 回答