Question

当用户按下Down箭头键时，我希望它会选择下一个建议。

当用户按下Up箭头键时，我希望它会选择之前的建议。

例如，输入搜索字词后，您可以使用箭头键选择Google等建议。

我该怎么做？

这是我目前的代码：

script_suggestion.php：

<html>

    <script type="text/javascript">

        //document.getElementById("suggestion")

        function getSuggestion(q) {
            window.document.onkeyup = function (e)
            {
               if (!e) e = event;
               if (e.keyCode == 27)
               document.getElementById("suggestion").style.visibility = "hidden";
            }

            var ajax;
            if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                ajax = new XMLHttpRequest();//ajax object
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
            ajax.onreadystatechange = function() {
                if(ajax.status === 200 && ajax.readyState === 4) {
                    //if result are not there then don't display them
                    if(ajax.responseText === "")
                        document.getElementById("suggestion").style.visibility = "hidden";
                    else {
                        document.getElementById("suggestion").style.visibility = "visible";
                        document.getElementById("suggestion").innerHTML = ajax.responseText;
                    }
                }
            };
            ajax.open("GET", "suggestion.php?q=" + q, false);
            ajax.send();
        }
    </script>

</html>

提前致谢。

Answer 1

您可以使用jQuery UI自动完成插件（http://jqueryui.com/autocomplete/）来实现它。

例如

<html>
        <head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $("#lang").autocomplete({

            source: function(request, response) {
            $.get('suggest.php', { sqry: request.term }, function(data) {
                response(data.split("\n"));
            });
            }
       });
       });
        </script>

        </head>
        <body>
            Language : <input id="lang" name="lang">

        </body>
    </html>

suggest.php

    <?php

    if (isset($_GET['sqry'])){
        $arrayVal = array();

        try {
            $connxn = new PDO("mysql:host=".$config['host'].";dbname=".$config['database'], $config['username'], $config['password']);
            $connxn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $stmnt = $connxn->prepare('select DISTINCT fieldName from tableName WHERE fieldName LIKE :sqry ORDER BY fieldName ASC LIMIT 0,25');

            $stmnt->execute(array('sqry' => '%'.$_GET['sqry'].'%'));

            while($row = $stmnt->fetch()) {

                      $arrayVal[] = $row['fieldName'];

            }

        } catch(PDOException $e) {
            echo 'ERROR: ' . $e->getMessage();
        }

       echo implode("\n",$arrayVal);
    }

    ?>

使用箭头键在Google等建议之间导航

1 个答案: