输入字段中的Keydown功能

Question

我想关闭我的搜索结果，为此我正在使用下面的jquery：

$('#ChangeAccountInput').keydown(function(e)
{
    if(e.keyCode==40)
    {
        $('#results').css("background-color", "yellow");
    }
});

但问题是，它适用于整个div而不是单个值。

以上jquery适用于所有人：

HTML：

<input  id='ChangeAccountInput' class="InputBorder" placeholder="Search" style="display: none; margin-top: -79px; margin-left: -226px; border: 1px solid rgb(133, 133, 133); font-family: calibri; font-size: 15px; color: rgb(68, 68, 68); padding-left: 6px; padding-right: 21px; width: 182px"/>
<i class="icon-search" id="iconsearch1" style="display: none; margin-top: -37px; margin-left: -22px;"></i>


<div id="results" stlye='display: none'></div>

PHP：

while($row = oci_fetch_assoc($query))
{
    echo "<a href='#'>";
    echo '<font>'.$row['ACCOUNT_TYPE'].'</font>';
    echo '<br>';
    echo "<div style='border: 1px solid #AAAAAA; margin-left: -4px'></div>";
    echo "</a>";
}

AJAX：

$.ajax
({
    type: 'GET',
    url: 'Reports/Account Search.php',
    data: 'GetAccountInput='+GetAccountInput,
    success: function(data)
    {
        $('#results').html(data);
        $('#results').show();
    }
});

帐户搜索文件：

<?php

  error_reporting(0);

  $user = "fyp";
  $pass = "fyp";
  $host = "localhost/CRMP";

  // Connection with the Oracle.
  $con = oci_connect($user, $pass, $host);

  // If connection is established with the Oracle or not. 
  if (!$con)
  {
      //header('location:../../../Extra/Error_Other.php');
  }

  else
  {
      //echo "Connected to Oracle.";
  }
?>

<?php

    $GetAccount = $_GET['GetAccountInput'];

    if($GetAccount != '')
    {
        $query = oci_parse($con, "SELECT DISTINCT ACCOUNT_TYPE FROM ACCOUNTS WHERE ACCOUNT_TYPE LIKE '%".$GetAccount."%'");
        oci_execute($query);

        $check = oci_fetch_array($query);
        if(empty($check))
        {
            echo "<a href='#'>";
            echo "No Result Found";
            echo "</a>";
        }

        while($row = oci_fetch_assoc($query))
        {
            echo "<a>";
            echo $row['ACCOUNT_TYPE'];
            echo '<br>';
            echo "</a>";
            echo "<div style='border: 1px solid #777A79; margin-left: -6px'></div>";
        }
    }

    else
    {

    }
?>

帮助将被评估。

Answer 1

我想到了更多，我想出了一个适合你的解决方案。您应该做的就是根据需要添加所需的样式和其他动画。

http://jsfiddle.net/2wk6Q/1095/

$('#ChangeAccountInput').keydown(function (e) { //not actually the down key though :-)
    if ($('a').hasClass('yellowBack')) { // do any links have this class?
        var selected = $('a.yellowBack'); // if the do, they are the 'selected' link
        selected.removeClass('yellowBack'); // this cleans up the one that we move from

        if (40 == e.keyCode) { // going down the list
            if (selected.next().length == 0) {
                // if there isn't another list item, highlight the first
                $('#results a:first').addClass('yellowBack');
            } else {
                // add the class to the next item                                
                selected.next().addClass('yellowBack');
            }
        } else { // going up the list
            if (selected.prev().length == 0) {
                // add the class to the last item if you have gone to the top of the list
                $("#results a:last").addClass("yellowBack");
            } else {
                // add the class to the next one up the list
                selected.prev().addClass('yellowBack');
            }
        }
    } else {
        // if none were initially selected, select the first one
        $("#results a:first").addClass("yellowBack");
    }
});

无论列表的长度如何，这都允许您上下移动返回的列表。正确的样式将阻止您在上面提到的滚动条问题。

编辑：修改PHP以使输出与最新的小提琴相匹配 -

while($row = oci_fetch_assoc($query))
{
    echo "<div style='border-bottom: 2px solid #777A79; margin-left: -4px'>";
    echo "<a href='#'>";
    echo '<font>'.$row['ACCOUNT_TYPE'].'</font>';
    echo "</a>";
    echo "</div>";
}

修改的原因是因为PHP实际上是在JavaScript中输出难以使用的HTML。 OP正在学习如何格式化他的所有代码，从后到前，以便它可以很好地协同工作。