Question

我正在尝试使文本建议程序正常工作。在此程序中，当用户在文本字段中键入某些文本时，将生成xmlhttprequest，并在datalist中显示响应。它与鼠标完美配合，但是当我尝试通过键盘选择时，它无法正常工作。也就是说，我无法通过键盘选择建议。任何建议都会有所帮助...... 这是我的html文件：

    <html>
    <head>
    <script>
        function showHint(str) {
            if (str.length == 0) { 
             document.getElementById("txtHint").innerHTML = "";
             return;
           } else {
           var xmlhttp = new XMLHttpRequest();
           xmlhttp.onreadystatechange = function() {
           if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML =  xmlhttp.responseText;
          }
    };
    xmlhttp.open("GET", "gethint.php?q=" + str, true);
    xmlhttp.send();
      }
     }
     </script>
  </head>
 <body>
  <p><b>Get suggestions on input</b></p>
 <form action="#">
  <input onkeyup="showHint(this.value)" list="txtHint">
    <datalist id="txtHint">
    </datalist>
  <input type="submit" value="Search">
  </form>
 </body>
 </html>

这是php文件：

    <?php
     $a[] = "Army";
     $a[] = "Britain";
     $a[] = "Children";
     $a[] = "Drama";
     $a[] = "Explain";
     $a[] = "Florence";
     $a[] = "Gunda";
     $a[] = "Hello";
     $a[] = "Instagram";
     $a[] = "Johanna";
     $a[] = "Kabul";
     $a[] = "Lok";
     $a[] = "Nanu";
     $a[] = "Orange";
     $a[] = "Paint";
     $a[] = "Andorra";
     $a[] = "Antarctica";

    $q = $_REQUEST["q"];

    $hint = "";

    if ($q !== "") {
        $q = strtolower($q);
        $len=strlen($q);
        foreach($a as $name) {
         //search for string and return rest of string
         if (stristr($q, substr($name, 0, $len))) {
             if ($hint === "") {
                 $hint = '<option value = "'.$name.'">';
             } else {
                 $hint = $hint.'<option value = "'.$name.'">';
             }
         }
     }
   }
    echo $hint === "" ? "no suggestion" : $hint;
    ?>

Answer 1

而不是原始单独的脚本这是一个all-in-one页面，但它应该显示所做的更改 - 主要和最重要的是js函数以及如何在html中调用它。它确实需要event，以便它可以检测键码值。

<?php

    ob_clean();

    $a[] = 'Army';
    $a[] = 'Britain';
    $a[] = 'Children';
    $a[] = 'Drama';
    $a[] = 'Explain';
    $a[] = 'Florence';
    $a[] = 'Gunda';
    $a[] = 'Hello';
    $a[] = 'Instagram';
    $a[] = 'Johanna';
    $a[] = 'Kabul';
    $a[] = 'Lok';
    $a[] = 'Nanu';
    $a[] = 'Orange';
    $a[] = 'Paint';
    $a[] = 'Andorra';
    $a[] = 'Antarctica';


    $hints=array();
    $q = isset( $_GET['q'] ) && !empty( $_GET['q'] ) ? $_GET['q'] : false;

    if( $q ){
        /* entire word */
        if( in_array( $q, $a ) ) $hints[]='<option value="'.$q.'">'.$q;

        /* find portions of the word in array members */
        foreach( $a as $word ){
            if( stristr( $word, $q ) ) $hints[]='<option value="'.$word.'">'.$word;
        }

        exit( !empty( $hints ) ? implode( PHP_EOL, $hints ) : 'No suggestions' );
    }

?>
<!doctype html>
<html>
    <head>
        <title>XMLHttpRequest - Text Hints</title>
        <script type='text/javascript'>
            function showHint(event, str) {
                /* Return if arrow up, arrow down or enter are pressed */
                if( event.keyCode==40 || event.keyCode==38 || event.keyCode==13 ) return;

                if( str.length == 0 ) { 
                    document.getElementById('txtHint').innerHTML = '';
                    return;
                } else {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                            document.getElementById('txtHint').innerHTML =  xmlhttp.response;
                        }
                    };
                    /* Change this to the path to actual script if on different page */
                    xmlhttp.open( 'GET', '?q=' + str, true );
                    xmlhttp.send();
                }
            }
        </script>
    </head>
    <body>
        <form name='search' method='get'>
            <h1>Search</h1>
            <input onkeyup='showHint( event, this.value )' list='txtHint'>
            <datalist id='txtHint'></datalist>
            <input type='submit' value='Search'>
        </form>
    </body>
</html>

带有onkeyup事件的输入标记，用于不使用键盘上/下箭头键的建议的数据列表

1 个答案: