0

漫画サイトを運営しています。その機能の 1 つは、ユーザーがコミックを検索できるようにすることです... 検索は入力を即座に解析し、一致するタイトルとキーワードに基づいてサムネイルの結果を返します。

当初、検索はすべての結果を返し、バウンディング検索ボックスは下に無限に拡大し、すべてのコミック結果を保持していました。結果を 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

「さらにロード」をクリックすると、新しい結果のみが表示されます。

さらに読み込むは、検索URLと同じURLである必要があります。

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

URLに2つのパラメータを追加するだけです。start and max。それらをクエリに渡すと、正確な結果が得られます。

検証するだけStart < Maxで、整数intval()であり、0ではありませんempty()。また、その場合Max <= 4は、それ以上の負荷を表示しないでください。

于 2013-02-14T07:49:17.970 に答える
1

私はあなたの結果をすべて返してから、あなたの結果を決定しようとします. 4 つを超える場合は、最初の 4 つの結果をループします。ユーザーが [さらに読み込む] ボタンをクリックすると、4 番目の要素からループが開始されます。そうすれば、サーバーに 1 回 (検索ごとに) ヒットするだけで済みます。

結果を 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 に答える
1

これを試して：

<script type="text/javascript">

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

</script>
于 2013-02-14T06:38:30.080 に答える
0

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

Jクエリ:

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

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

});

于 2013-02-20T00:33:52.980 に答える