【问题标题】:Can't select suggestions when I click on them [duplicate]单击它们时无法选择建议[重复]
【发布时间】:2014-01-03 14:04:52
【问题描述】:

当我点击它们时,我无法选择任何建议。

我希望当我将鼠标悬停在建议上时可以单击、选择和更改颜色。

我该怎么做?

这是我当前的代码:

<?php
    include 'connect.php'; //connect with database
    $query = $_GET["q"];
    if($query != "")
    {
        $safequery = mysqli_real_escape_string($con,$query);
        $stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . $safequery . "%' OR keywords LIKE '%" . $safequery . "%' OR link LIKE '%" . $safequery . "%' LIMIT 4";
        $result = mysqli_query($con,$stmt) or die(mysqli_error($con));

        $number_of_result = mysqli_num_rows($result);
        if ($number_of_result > 0)
        {
            //results found here and display them
            while ($row = \mysqli_fetch_assoc($result))
            { //show first 10 results
                //add $title to an array which you will call json_encode(arr) on.
                $title = $row["title"];
                echo "<div id='sugg-search-result'>";
                echo "<div id='sugg-title'>" . $title . "</div>";
                echo "</div>";
            }
        }
    }
?>

【问题讨论】:

  • 对于鼠标 Hover 的效果,你可以考虑为 sugg-title css 类做一些 css。
  • 参见例如 jQuery 的自动完成:jqueryui.com/autocomplete 和它的相关样式表。您需要像 Goikiu 指出的那样使用 CSS 进行样式设置。您可以手动完成所有操作,也可以只使用一些现成的解决方案,例如 Autocomplete 或 AutoSuggest (code.drewwilson.com/entry/autosuggest-jquery-plugin),它们会自动提供必要的类和样式。

标签: php html css search-suggestion


【解决方案1】:

你可以尝试如下:

<?php

include 'connect.php'; //connect with database

$query = isset($_GET["q"]) ? $_GET : '' ;

if($query != "")
{
    $safequery = mysqli_real_escape_string($con,$query);

    $stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . $safequery . "%' OR keywords LIKE '%" . $safequery . "%' OR link LIKE '%" . $safequery . "%' LIMIT 4";

    $result = mysqli_query($con,$stmt) or die(mysqli_error($con));

    $number_of_result = mysqli_num_rows($result);

    if ($number_of_result > 0) {
        //results found here and display them
        while ($row = \mysqli_fetch_assoc($result)) { //show first 10 results
            //add $title to an array which you will call json_encode(arr) on.
            $title = $row["title"];
            echo "<div id='sugg-search-result'>";
            echo "<div class='suggestion' id='sugg-title'>" . $title . "</div>";
            echo "</div>";

        }

    }
}
?>

CSS:

<style>
    .suggestion:hover {
        color:orange;
    }
</style>

Javascript:

<!-- jQuery -->

<script>
    $(document).on('click','.suggestion',function(){
        // write your necessary javascript code
    });
</script>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-01-26
    • 1970-01-01
    • 1970-01-01
    • 2015-11-20
    • 2017-03-19
    • 2014-10-14
    • 2014-06-09
    • 1970-01-01
    相关资源
    最近更新 更多