Question

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

最初，搜索将返回所有结果，并且边界搜索框将无限向下扩展，保留每个漫画结果。我认为将结果限制为4可能是个不错的选择，并显示一条消息，例如＆＃34;加载5个剩余图像＆＃34;如果用户选择这样做。

如果他们点击该消息，我想要删除或更改限制php变量。

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

enter image description here

编辑：最新代码：

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>

Answer 1

试试这个：

<script type="text/javascript">

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

</script>

Answer 2

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

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

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

只需在网址中添加两个参数即可。 start and max。将它们传递给您的查询，您就会得到确切的结果。

仅验证Start < Max并且是整数intval()而不是0 empty()。此外，如果Max <= 4则不再显示负载。

Answer 3

我会回复你的所有结果，然后尝试确定你的结果。如果超过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);
    }
);

Answer 4

我最终选择了jquery show和hide函数。

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>";
}
}

<强> Jquery的：

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

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

});

PHP搜索：使用Jquery来改变php的值

4 个答案: